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

James Donnelly · Accepted Answer · 2014-10-09 09:38:24Z

6

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 { ... }

answered Oct 9, 2014 at 9:38

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3428422 Over a year ago

Thanks for the answer and the additional advice! will mark as soon as SO lets me

Collectives™ on Stack Overflow

input-validation-error CSS for Dropdowns

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related