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

    版本:CSS3

    CSS 伪类:checked选择器表示任何处于选中状态的radio(<input type="radio">), checkbox(<input type="checkbox">)或(<select>)元素中的option HTML元素("option")。

    语法:

    E:checked{sRules}

    匹配用户界面上处于选中状态的元素E。(用于<input>为radio与checkbox时)

    /* 匹配任意被勾选/选中的radio(单选按钮),checkbox(复选框),或者option(select中的一项) */
    :checked { 
      margin-left: 25px; 
      border: 1px solid blue; 
    }
     

    用户通过勾选/选中元素或取消勾选/取消选中,来改变该元素的:checked状态。

    Note:因为浏览器经常将<option>视为可替换元素,因此不同的浏览器通过:checked伪类渲染出来的效果也不尽相同.

    浏览器支持

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

    例子

    //html
    
    <div>
      <input type="radio" name="my-input" id="yes">
      <label for="yes">yes</label>
    
      <input type="radio" name="my-input" id="no">
      <label for="no">no</label>
    </div>
    
    <div>
      <input type="checkbox" name="my-checkbox" id="opt-in">
      <label for="opt-in">check me!</label>
    </div>
    
    <select name="my-select" id="fruit">
      <option value="opt1">apples</option>
      <option value="opt2">grapes</option>
      <option value="opt3">pears</option>
    </select>
    
    //CSS
    
    div,
    select {
      margin: 8px;
    }
    
    /* labels for checked inputs */
    input:checked + label {
      color: red;
    }
    
    /* radio element, when checked */
    input[type="radio"]:checked {
      box-shadow: 0 0 0 3px orange;
    }
    
    /* checkbox element, when checked */
    input[type="checkbox"]:checked {
      box-shadow: 0 0 0 3px hotpink;
    }
    
    /* option elements, when selected */
    option:checked {
      box-shadow: 0 0 0 3px lime;
      color: red;
    }
    

    这个例子利用了:checked伪类,让用户基于复选框的状态切换内容,而无需使用JavaScript。

    //html
    
    <input type="checkbox" id="expand-toggle" />
    
    <table>
      <thead>
        <tr><th>column #1</th><th>column #2</th><th>column #3</th></tr>
      </thead>
      <tbody>
        <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
        <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
        <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
      </tbody>
    </table>
    
    <label for="expand-toggle" id="expand-btn">toggle hidden rows</label>
    
    //CSS
    
    /* hide the toggle checkbox */
    #expand-toggle {
      display: none;
    }
    
    /* hide expandable content by default */
    .expandable {
      visibility: collapse;
      background: #ddd;
    }
    
    /* style the button */
    #expand-btn {
      display: inline-block;
      margin-top: 12px;
      padding: 5px 11px;
      background-color: #ff7;
      border: 1px solid;
      border-radius: 3px;
    }
    
    /* show hidden content when the checkbox is checked */
    #expand-toggle:checked ~ * .expandable {
      visibility: visible;
    }
    
    /* style the button when the checkbox is checked */
    #expand-toggle:checked ~ #expand-btn {
      background-color: #ccc;
    }
    

    <label for="expand-toggle" id="expand-btn">toggle hidden rows</label>被点击时,其关联的<input type="checkbox"id="expand-toggle"/>被激活,并且处于选中checked状态。

    column #1column #2column #3
    [cell text][cell text][cell text]
    [cell text][cell text][cell text]
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    input:checked{
    opacity:0.3;
    }
    </style>
    </head>
    <body>
    
    
    <p>给选中的输入元素设置透明度</p>
    <input type="radio" checked="checked" value="male" name="gender" />male<br>
    <input type="radio" value="female" name="gender" />female<br>
    </body>
    </html>

    给选中的输入元素设置透明度

    male
    female

    上篇::focus

    下篇::out-of-range