input-validation-error CSS for Dropdowns

Question

(Ok this could be a duplicate, but a search didn't lead me to any posts, so apologises in advance if there is a post out there)

I have a dropdown that lists strings, the default is Please Select. If the user submits the form with Please select still selected the modelstate fails and it states an error. (Good) however, I want a red border as well as the error to appear. The css is

 input.input-validation-error { border: 1px solid #f00; background-color: #fee; }
 textarea.input-validation-error { border: 1px solid #f00; background-color: #fee; } 

 // is it as easy as this? I am guessing its not "dropdown" or is a 10x more complicated?
 dropdown.input-validation-error { border: 1px solid #f00; background-color: #fee; }  

So how do I put the red border around dropdowns?

Here is an example of a strongly typed dropdown

@Html.DropDownListFor(m => m.test.id, new SelectList(Model.test.list, "Id", "Name"), "Please Select")

Thanks

Answer 1

dropdown isn't a valid HTML element. select is the correct element in this case:

select.input-validation-error { ... }

However, depending on the specificity of your selector you can quite possibly drop the element name altogether and just use:

.input-validation-error { ... }

At any rate it's worth noting that multiple selectors can be given the same styling by separating them with a comma, so you don't need to repeat the same style declarations over and over:

input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error { ... }