disabled選擇器
與“:enabled”選擇器相反,用來選擇不可用表單元素。
要正常使用“:disabled”選擇器,需要在表單元素的HTML中設置“disabled”屬性。
通過“:disabled”選擇器,給不可用輸入框設置明顯的樣式。
HTML代碼:
<form action="#"> <div> <input type="text" name="name" id="name" placeholder="我是可用輸入框" /> </div> <div> <input type="text" name="name" id="name" placeholder="我是不可用輸入框" disabled /> </div> </form>
CSS代碼:
form {
margin: 50px;
}
div {
margin-bottom: 20px;
}
input {
background: #fff;
padding: 10px;
border: 1px solid orange;
border-radius: 3px;
}
input[type="text"]:disabled {
background: rgba(0,0,0,.15);
border: 1px solid rgba(0,0,0,.15);
color: rgba(0,0,0,.15);
}結果演示:
