Custom CSS

Anonymous

#155794

Hi Guys, no matter what I try I can’t get my form fields to behave according to my custom css as follows;

.searchandfilter select.sf-input-select {width:100% !important; height:auto; margin:0px 0px 8px 0px; padding:10px; border:4px solid #f37021;}
.searchandfilter input[type=text].sf-input-text {width:100% !important; height:auto; margin:0px 0px 8px 0px; padding:10px; border:4px solid #f37021;}
.searchandfilter select {width:100% !important; height:auto; margin:0px 0px 8px 0px; padding:10px; border:4px solid #f37021;}
.searchandfilter input[type=text] {width:100% !important; height:auto; margin:0px 0px 8px 0px; padding:10px; border:4px solid #f37021;}

Text field won’t go full width and select fields resize on ajax refresh depending on what values are in them, nothing is adhering to the 100% width rule at all, any ideas? No theme css conflicts that I’m aware of, what am I missing?
Thanks
Matt

Trevor

#155903

Are you able to send me a live link/URL to your search page so I can take a look?

Please make sure that you do not have any of the following active:

1. A CDN
2. A WordPress cache plugin
3. A minification/combiner plugin (like Autoptimize) – some cache plugins (from 2) contain these
4. A server cache

And also check to make sure you have cleared your browser cache (or bypassed the browser cache)

Anonymous

#156012

This reply has been marked as private.

Trevor

#156040

On the select boxes, for example, you have to make the labels 100% width, like this:

.searchandfilter label {
  width: 100%;
}

Then the select will expand to that with your CSS. What other bits don’t appear to be working?

[Author]

Posts