Question

我有一个选择列表，其中包含属性＆＃39; required＆＃39;将第一项设置为已禁用并已选中：

<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/，其中还有一个显示效果的文本输入

Answer 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

选择列表必需属性样式

1 个答案: