前端技术学习之选择器（十）

来源：互联网发布：崩坏学园2淘宝代练编辑：程序博客网时间：2024/06/04 19:50

十一，:disabled选择器

一看这个属性就知道是专为表单元素提供的。在表单中输入框，密码框，复选框都有可用(:enabled)和不可用（:disabled）状态，默认情况，这些表单元素都处在可用状态。可通过选择器:enabled为这些表单元素设置样式。

代码例子：可用输入框设置样式

<!DOCTYPE HTML>

<style>

div {

margin: 30px;

}

input[type="text"]:enabled {

border: 1px solid #f36;

box-shadow: 0 0 5px #f36;

}

</style>

<div>

<label>可用输入框:<input type="text"/></label>

</div>

<div>

<label>禁用输入框:<input type="text" disabled="disabled"/></label>

</div>

</form>

</body>

</html>

运行效果：

注：看到有【:enabled】选择器，就知道肯定有【:disabled】选择器了。看名字就知道:disabled选择器和:enabled选择器相反，用来匹配不可用的表单元素。要使用:disabled选择器，需要在表单元素中设置"disbled"属性

0 0