Question

我有一个放在标签控件内的复选框。我需要将焦点上的标签背景颜色更改为复选框。

是

我见过Textbox的源代码如下：

input:focus + label {background-color: red;}

我已尝试使用复选框上面的代码，但复选框无效。

input[type="checkbox"]:focus + label {background-color: red;}

请帮我解决这个问题

Fiddle Demo

Answer 1

由于输入是标签的子元素，因此没有可以影响/选择它的CSS选择器。

然而，使用Jquery，这很简单。

＆＃13;

$(document).ready(function () {
    $('input').focus(function () {
        $(this).parents('label').addClass('focused');
    });

    $('input').blur(function () {
        $(this).parents('label').removeClass('focused');
    });
});

＆＃13;

label {
    float:left;
}
.focused {
    outline:none;
    box-shadow: 0 0 1px 2px rgba(0, 240, 255, 0.4);
    background-color : rgba(0, 240, 255, 0.4);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="chkYesIsSubPropofferedSale">Check
    <input id="chkYesIsSubPropofferedSale" type="checkbox" />
</label>

＆＃13;

注意：我的JQ技能很小，所以我确信这可以改进。

Answer 2

基于Paulie_D给出的答案和亚历山大提供的小提琴 - 我想出了following fiddle

它使用jQuery hover event来附加和删除标签的类，该标签是复选框的父级 - 希望这对你有用。有问题的jQuery如下：

$('.checkBoxClass').hover(
  function()
  { 
     $(this).parent('label').addClass('focused');
  },
  function()
  { 
     $(this).parent('label').removeClass('focused');
  }  
);

之前已经使用所需的背景颜色定义了聚焦。您不需要使用类，但您可以单独设置颜色：

$(this).parent('label').css('background-color', 'red');

Answer 3

没有JavaScript ，除非两个元素在DOM树中具有相同的父元素，否则无法执行此操作。 element1 + element2是＆＃34;后继者＆＃34;选择器 - 它将规则应用于element2之后立即放置的每个element1。但是使用CSS，你可以直观地将一个元素放在另一个元素中而不是它的父元素。 POC：

＆＃13;

label {
  float:left;
  margin-right: -22px;
  padding-right: 22px;
}
input:focus + label {background-color: red;}

input[type="checkbox"]:focus + label {
  outline:none;
  box-shadow: 0 0 1px 2px rgba(0, 240, 255, 0.4);
  background-color : rgba(0, 240, 255, 0.4);
}

＆＃13;

<div class="row">
  <input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
  <label><input id="chkYesIsSubPropofferedSale" type="checkbox"></label>
  <br>
  <input id="chkYesIsSubPropofferedSale" type="checkbox">
  <label>Check</label>
</div>

＆＃13;

更改聚焦标签背景颜色复选框

3 个答案: