Down arrow on select boxes, colour?

[johnwards]

I would like to change the colour of the down arrow on the select box. I have tried and failed to figure it out using the inspector in Chrome.

Can someone point me in the right direction of what styles I can add to over ride the default grey colour?

[davidkaneda]

Try this? ".x-field-select :before { background: red none !important; }"

[johnwards]

Nope, see screenshot of style being applied but to no effect http://grab.by/86pd

[davidkaneda]

Sorry, try it on the after?

[johnwards]

Nope. I just did this:

.x-field-select :after { background: red none !important; }

I have removed all my custom styles too with no difference. Very frustrating, especially with a client saying "I thought it was just html and css". Reminds me of the spoof MS Paint video...http://www.youtube.com/watch?v=Hxx2KcPWWZg (Can you make the line thicker? No...)

I am sure its something simple, but I'm lost.

[davidkaneda]

Jeez, I'm sorry- forgot it was a CSS triangle. Do border-color instead of background (and drop the "none") and you should be set-

[johnwards]

.x-field-select::after {
border-top-color: red !important;
}

That did it.