I'm trying to make a Stylish userstyle for all pages on www.livejournal.com. I want to style the text and select type input boxes with a particular background colour, but the bg colour does not get set on all input boxes, even though color does get set. Some boxes remain white.
When I inspect them with Firebug, it says that the bg colour of the computed CSS is the colour I specified (not white!).
The code I am using is
input[type*=text], select {
-moz-border-radius: 0px!important; border-radius: 0px!important;
border-color: #626363!important; border-color: rgba(255,255,255,0.06)!important;
color: #aaa!important; background: #3A4756!important;
font: 11px lucida grande, segoe ui, calibri, arial, sans-serif!important; }
#SearchText { background: #3A4756!important; }
#SearchText is the id of one particular problem element. color: #aaa!important; is applied to all these elements where the bg colour is ignored, and again, most other input boxes are styled correctly.
Why might this be happening, and is there any workaround?
update: I've tried changing the selector to input[type="text"], and tried putting a space before !important;.
I've also put my style code into a fiddle with the entire source of www.livejournal.com pasted into the html field. In that case, the bg colour is correctly applied. However if I try my userstyle with just that code block (to ensure nothing afterwards is overwriting it), and actually visit the site, it doesn't get applied.
update: Followed Brock's suggestion without any change in FF :( However, the problem input boxes do get styled in Chrome, so apparently this is a problem with FF.
It's possible your selector isn't quite right for the tag. I would write that as input[type="text"], no asterix. See http://reference.sitepoint.com/css/css3attributeselectors.
Secondly, I'm not sure if you need to have a space before the !important declaration. Might be worth adding one to check and see. Reference on syntax on Sitepoint doesn't specify it.