选择列表所需的属性样式答案

【问题标题】：Select list required attribute styling选择列表所需的属性样式
【发布时间】：2014-12-08 02:48:50
【问题描述】：

我有一个选择列表，其属性为“必需”，第一项设置为禁用并选中：

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

我的 CSS 是：

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

问题是如何在所选选项没有值（即禁用选项）和选择值时，选择“选择列表边框红色”选择值

我在这里添加了小提琴http://jsfiddle.net/czs1w6br/，它还有一个演示效果的文本输入

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

目前，您的第一个选项的 value 属性将是“选择一个选项”，这是一个完全有效的值。

给第一个选项一个空的value 属性：

<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

【讨论】：