当输入（透明）获得焦点时，如何将CSS类添加到其父级？

Question

我在bootstrap中使用'checker'组件。检查器的HTML是：

<div class='checker'>
   <span>
      <input type='checkbox'/>         <--- the Opacity of this checkbox is 0
   </span>
</div>

我希望在输入获得焦点时显示焦点轮廓，但输入的不透明度为0.

有焦点时，有没有办法将CSS类添加到它的父级？ 或者以任何其他方式显示焦点轮廓？

Answer 1

您可以使用JavaScript将类添加到父span。以下是使用jQuery的CodePen示例：http://codepen.io/pzi/pen/YPyWQq

另外，不要忘记使用label元素（如我的示例所示）。