上下文：

Question

上下文：

我使用精灵表和jQuery设置了一个复选框样式。

我希望＆＃34;专注＆＃34;状态的行为与此free HTML5 template上的复选框完全相同：

通过＆＃34;焦点＆＃34; /＆＃34;模糊＆＃34;，我指的是复选框周围的彩色边框：

...出现在选项卡上的复选框，单击复选框或单击标签。
...消失在复选框的标签上，单击复选框或单击标签。

我的代码：

到目前为止，我只实现了所描述的＆＃34;焦点＆＃34; /＆＃34;模糊＆＃34;在选项卡的进/出标签上。

作为JSFiddle：

http://jsfiddle.net/k9mgh8rz/4/

作为HTML页面：

（作为Stack Overflow片段发布时，CDN脚本无法加载。）

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
    input[type="text"],
    input[type="password"] {
      border: 1px solid black;
      padding: 5px;
    }

    input[type="text"]:focus,
    input[type="password"]:focus {
      border: 1px solid red;
    }

    label {
      cursor: pointer;
    }

    .forgetmenot span {
      display: inline-block;
      margin-left: 15px;
      position: relative;
      top: 3px;
    }

    /* iCheck Plugin (Skin for check-box)
    ----------------------------------- */

    .icheckbox_minimal {
      display: inline-block;
      *display: inline;
      vertical-align: middle;
      margin: 0;
      padding: 0;
      width: 30px;
      height: 30px;
      background: url(http://s10.postimg.org/lzj62spk5/check_boxes.png) no-repeat;
      border: none;
      cursor: pointer;
    }

    .icheckbox_minimal {
      background-position: 0 0;
    }

    .icheckbox_minimal.checked {
      background-position: -60px 0;
    }

    .icheckbox_minimal.focus {
      background-position: -30px 0;
    }

    .icheckbox_minimal.checked.focus {
      background-position: -90px 0;
    }

    /* HiDPI support */

    @media (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 120dpi),
    (min-resolution: 1.25dppx) {
      .icheckbox_minimal {
        background-image: url(http://s16.postimg.org/k51empanp/check_boxes_2x.png);
        -webkit-background-size: 200px 20px;
        background-size: 200px 20px;
      }
    }

    </style>

</head>

<body>

    <!--Mark-up cannot be edited for the purposes of the required solution.-->

    <p>
        <label for="user_login">Username<br>
            <input class="input" id="user_login" name="log" size="20" type="text" value="">
        </label>
    </p>

    <p>
        <label for="user_pass">Password<br>
            <input class="input" id="user_pass" name="pwd" size="20" type="password" value="">
        </label>
    </p>

    <p class="forgetmenot">
        <label for="rememberme">
            <input id="rememberme" name="rememberme" type="checkbox" value="forever"> Remember Me
        </label>
    </p>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.js"></script> 
    <script>
    $(document).ready(function() {
      //Add span for styling.
      $('#rememberme').each(function() {
        $(this.nextSibling).wrap('<span><\/span>');
      });
      //Apply iCheck
      $('input').iCheck({
        checkboxClass: 'icheckbox_minimal'
      });
    });
    </script>

</body>
</html>

我的问题：

使用上面的JSFiddle，只修改jQuery和CSS（但不是标记），我怎样才能实现所描述的＆＃34;焦点＆＃34; /＆＃34;模糊＆＃34;点击进/出复选框并点击/关闭标签？

Answer 1

类似的东西：

  $('input').on('click change', function()
  {
     $('input').css('border-color', 'black'); // reset all inputs to black
     $(this).css('border-color', 'red'); // define the current one as red
  });

单击，添加类，直到单击复选框/标签

上下文：

我的代码：

我的问题：

1 个答案: