• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • :disabled

    版本:CSS3

    CSS 伪类:disabled表示任何被禁用的元素。如果一个元素不能被激活(如选择、点击或接受文本输入)或获取焦点,则该元素处于被禁用状态。元素还有一个启用状态(enabled state),在启用状态下,元素可以被激活或获取焦点。

    语法:

    E:disabled{sRules}

    匹配用户界面上处于禁用状态的元素E。

    浏览器支持

    IE9+以及新版浏览器都支持:disabled

    例子

    这个例子显示基本的购物表单。通过使用 JavaScript change事件让用户启用/禁用付款字段。

    //HTML
    
    <form action="#">
      <fieldset id="shipping">
        <legend>shipping address</legend>
        <input type="text" placeholder="name">
        <input type="text" placeholder="address">
        <input type="text" placeholder="zip code">
      </fieldset>
      <br>
      <fieldset id="billing">
        <legend>billing address</legend>
        <label for="billing_is_shipping">same as shipping address:</label>
        <input type="checkbox" id="billing-checkbox" checked>
        <br>
        <input type="text" placeholder="name" disabled>
        <input type="text" placeholder="address" disabled>
        <input type="text" placeholder="zip code" disabled>
      </fieldset>
    </form>
    
    //CSS
    
    input[type="text"]:disabled {
      background: #ccc;
    }
    
    
    //JavaScript
    
    
    // wait for the page to finish loading
    document.addeventlistener('domcontentloaded', function () {
      // attach `change` event listener to checkbox
      document.getelementbyid('billing-checkbox').onchange = togglebilling;
    }
    , false);
    
    function togglebilling() {
      // select the billing text fields
      var billingitems = document.queryselectorall('#billing input[type="text"]');
    
      // toggle the billing text fields
      for (var i = 0; i < billingitems.length; i++) {
        billingitems[i].disabled = !billingitems[i].disabled;
      }
    }
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    input:enabled{
    background-color:pink;
    }
    </style>
    </head>
    <body>
    
    
    <p>给选中的输入元素设置背景色</p>
    用户名:<input type="text"><br>
    密 码 :<input type="password"><br>
    </body>
    </html>

    给选中的输入元素设置背景色

    用户名:
    密码:

    上篇::enabled

    下篇::out-of-range