更改聚焦標籤背景顏色複選框

Question

我有一個複選框放置在標籤控件中。我需要改變焦點上的標籤背景顏色複選框。

是

的文本框我所看到的源代碼如下：

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

我在上面的代碼試圖用複選框，但對於複選框不工作。

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

請幫我在這

Fiddle Demo

Answer 1

由於輸入是標籤的孩子沒有CSS選擇器，可以影響/選擇它。

然而，使用jquery是件簡單的事情。

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

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

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); 
 
}

<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>

注：我的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是「繼任者」選擇器 - 它將規則應用於緊接在element1之後的每個element2。但使用CSS，您可以直觀地將一個元素放在另一個元素中，而不需要它是父級元素。 POC：

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); 
 
}

<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>