Select Simple CSS question

[KirkmanJ]

I am hoping this will be really simple, and i am just missing the obvious.

<select class='pets' type='text' name='pets' id='pets' placeholder='Select a Pet...'>
	<option value='' disabled selected>Select a Pet...</option>
	<option>Dog</option>
	<option>Cat</option>
</select>

Using the following code as a basic example, what i want to do is when there is no pet selected the select box background be one colour, e.g. 'red'. When a pet has been selected I would like the background to change to another colour, e.g. 'green'.

Any help would be appreciated.

[snippsat]

Something like this Pen

[KirkmanJ]

I am afraid that is not quite what I am after. But that could be my fault for bad wording. I do not want the <option> tags to change colour, instead I would like the main <select> tag to be the one that changes.

So with your example I would like the <select> to appear red on page loading, but when someone selects 'Dog' the <select> would no longer be red but instead be green.

So in python terms:

If option== 'Select a Pet': 
     background-color= red
else: 
     background-color= blue