How to override CSS?

[dot832]

Hi,

For the following page – https://seedintegritypledge.com/search-for-non-gmo-seeds/

I want to set a border color for the text box (search by company) and selection field (search by state). For the text box, I have identified this style which sets border to none with !important. How can I override this border setting?

div.asp_w.asp_s.searchsettings input[type=’text’]:not(.asp_select2-search__field), div.asp_w.asp_sb.searchsettings input[type=’text’]:not(.asp_select2-search__field) {
width: 86% !important;
padding: 8px 6px !important;
margin: 0 0 0 10px !important;
background-color: #FAFAFA !important;
font-size: 13px;
border: none !important;
line-height: 17px;
height: 20px;
}

Thank you.

[Ernest Marcinko]

Hi,

Basically if the CSS is going to be printed inline (which will have higher specificity), then this will work:

div.asp_sb.searchsettings fieldset input[type='text'] {
  border: 1px solid red !important;
}

[dot832]

Hello,
I’m sorry but this CSS isn’t working. The border: none !important is still taking precedence.

[Ernest Marcinko]

All right, then this should very likely do the trick:

div.asp_w.asp_sb.searchsettings fieldset input[type='text'][name*=aspf] {
  border: 1px solid red !important;
}

[dot832]

I’m sorry but this didn’t work either. The CSS is on line 160.

See attached screen print

[Ernest Marcinko]

Interesting, let’s try something way more specific:

body div div.asp_sb.searchsettings fieldset input[type='text'][name*=aspf]:not(.asp_select2-search__field) {
    border: 1px solid #005d4b !important;
}

[dot832]

It worked!! Thank you!

[Ernest Marcinko]

Great! You are welcome!

[Author]

Posts