下拉菜单的输入验证错误CSS

Question

(好的,这可能是重复的,但搜索没有引导我任何帖子,所以如果有帖子那么提前道歉)

我有一个列出字符串的下拉列表,默认为Please Select.如果用户提交表单,请选择仍然选中,模型状态失败,并指出错误.(好)但是,我想要一个红色边框以及错误出现.css是

 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; }  

那么如何将红色边框放在下拉菜单周围？

以下是强类型下拉列表的示例

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

谢谢

Answer 1

dropdown不是有效的HTML元素.select在这种情况下是正确的元素:

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

但是,根据选择器的特殊性,您可以完全删除元素名称并使用:

.input-validation-error { ... }

无论如何,值得注意的是,多个选择器可以通过用逗号分隔它们来赋予相同的样式,因此您不需要一遍又一遍地重复相同的样式声明:

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