7-2 CSS3选择器 :disabled选择器
本节编程练习不计算学习进度，请电脑登录imooc.com操作

CSS3选择器 :disabled选择器

“: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);
}

结果演示：

任务

在右边CSS编辑器的第21行输入正确的代码，让不可用按钮显示为灰色。

index.htmlstyle.css 
  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8">
  5. <title>属性选择器</title>
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. </head> 
  8. <body>
  9. <form action="#">
  10.   <div><input type="text" /></div>
  11.  
  12.   <div>
  13.     <input type="submit" value="我要回到上一步" />
  14.     <input type="submit" value="禁止点下一步" disabled />
  15.   </div>
  16. </form> 
  17. </body>
  18. </html>
  1. form {
  2.   margin: 30px;
  3. }
  4.  
  5. div {
  6.   margin: 10px;
  7. }
  8.  
  9. input {
  10.   padding: 10px;
  11.   border: 1px solid orange;
  12.   background: #fff;
  13.   border-radius: 5px;
  14. }
  15.  
  16. input[type="submit"] {
  17.   background: orange;
  18.   color: #fff;
  19. }
  20.  
  21. input[type="submit"] ?  {
  22.   background: #eee;
  23.   border-color: #eee;
  24.   color: #ccc;
  25. }
下一节