Select list required attribute styling - html

Question

I have a select list which has the attribute 'required' with the first item set as disabled and selected:
<select tabindex='4' id='storeys' name='storeys' required >
<option selected disabled>Select an option</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
My css is:
select{
border: 1px solid rgb(171, 171, 171);
height: 24px;
font-size: 16px;
height:24px;
width:250px;
color:grey;
}
option{color: #000;}
option:first-child{color: #ccc;}
select:required{border-right:3px solid red;}
select:valid{border-right: 3px solid green;}
Question is how do I make the select list border red when the selected option has no value(ie the disabled option) and green when a value has been selected
I have added fiddle here http://jsfiddle.net/czs1w6br/ which also has a text input demonstrating the effect

Answer 1

Currently, the value property of your first option would be "Select an option", which is a perfectly valid value.
Give the first option an empty value attribute:
<select tabindex='4' id='storeys' name='storeys' required >
<option value='' selected disabled>Select an option</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
JSFiddle