Dropdown Styling Border

[Deborah]

Hi everyone,

I have a HubSpot form embedded in our external website and adapted the css-styling. I was using the selector: "hs-form select" for the styling of the dropdown. The background-color, the font everything works except of the border command. I don't know if this is a bug or not, but if I use .hs-form select {border: 1px solid black;} nothing happens.

 picture 1

 If I have a look at the source code of the page containing the Hubspot form with firebug, I see that the dropdown salutation-field is in the class "hs-input". But if I change my css to ".hs-input {border:1px solid red;}" nothing changes.

Then I tested to directly write in the source code of the website page through firebug and was adding the class with " style="border: 1px solid red;" ". This made the border red (see picture 2).

picture 2

How can I adapt the border of the dropdown?

I just found two selectors for dropdowns in the documentation:

.hs-form select {}

.hs-form select:focus {}

In none of the both selectors the border-command worked.

Any advice is appreciated! Thanks a lot.

Kind regards,

Deborah

[Jsum · Accepted solution]

@Deborah, have your tried !important? i.e.:

.hs-form select {
    border: 1px solid red !important;
}

You could also try being hyper specific with you targeting like: 

.hs-form div.field div.input select.hs-input {
    border: 1px solid red;
}

or placing the embed code in a wrapper on your site (I use a wrapper classed "form_wrap") and then doing something like:

.form_wrap select {
     border: 1px solid red !important;
}

to avoid targeting hs specific classes.

[Deborah]

@Jsumthanks a lot for your quick response!

I forgot the !important... Now it works.

What's the basically difference between the second proposed version (hs-form div.field div.input select.hs-input) and the first version (hs-form select)? The second version is more specific, is this a bad or a god thing - what do you recommend?

[Jsum]

@Deborah specificity is a good thing in this situation, overwriting styling included in an embed, and generally in most cases as well. The browser reads css from top to bottom with the last read being the dominant styling. Only two things can change this, !important and extreme specificity. 

On the other hand, specificity is bad in dynamic cases. I try to target general elements (h1, h2, p, ul, etc.) inside a wrapper class in hubspot, if not just in the body because adding classes to these elements with specific styling leaves the door open for user error if my clients make changes in a rich text editor, for instance, that removes these classes. 

There are all kinds of gotcha's in this environment but really it's dealers choice. Always try being specific with the css when problem solving though.