複選框使用無ID標籤（標籤CSS可以更改）

<style> 
input[type=checkbox]{display:none} 
label{color: black;} 
input[type=checkbox]:checked + label{color:red;} 
</style> 

<label><input type="checkbox">Click</label>

我有一個複選框使用標籤點擊，當複選框點擊時，標籤應該改變顏色。我試圖實現的是do it without for="id"。我將輸入放在標籤內，但顏色不會改變。複選框使用無ID標籤（標籤CSS可以更改）

有沒有ID做到這一點的任何方式？

來源

2014-01-25 Ben

這可不行，正是因爲你的'input'是'label'內，並使其工作將需要家長選擇（不幸的是，CSS缺乏）;然而，你可以用「span」包裝文本，並使用相鄰的兄弟（'+'）選擇器來表示兄弟元素的樣式。 –

這是一個黑客位，但你可以使用這樣的事情：

隨着外標籤輸入..

<input type="checkbox"><label>Click</label> 

input[type=checkbox] { 
    display: inline-block; 
    width: 100%; 
    position: relative; 
    z-index: 1; 
    opacity: 0; 
} 
label { 
    position: absolute; 
    top: 8px; 
    color: black; 
} 

input[type=checkbox]:checked + label { 
    color: red; 
}

一個例子：http://jsfiddle.net/96v7C/

來源

2014-01-25 11:50:14

這裏是一個compleat無線電butons和複選框示例。

jsFiddle

/*style for iinpul checkbox*/ 
input[type=radio], input[type=checkbox] { 
    display:none; 
} 
input[type=radio] + label, input[type=checkbox] + label { 
    display:inline-block; 
    line-height: 20px; 
    color: #333; 
    text-align: center; 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 
    vertical-align: middle; 
    cursor: pointer; 
    background: -moz-linear-gradient(center top, #FFFFFF 20%, #F6F6F6 50%, #EEEEEE 52%, #F4F4F4 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0); 
    border: 1px solid #AAAAAA; 
    border-radius: 5px; 
    box-shadow: 0 0 3px #FFFFFF inset, 0 1px 1px rgba(0, 0, 0, 0.1); 
    color: #444444; 
    display: block; 
    height: 34px; 
    line-height: 34px; 
    overflow: hidden; 
    position: relative; 
    text-decoration: none; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    font-size: 13px; 
} 
input[type=radio]:checked + label, input[type=checkbox]:checked + label { 
    background-image: none; 
    outline: 0; 
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
    background-color:#e0e0e0; 
}

來源

2014-01-25 11:58:34 Florin

.c-custom-checkbox { 
 
    padding-left: 20px; 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 
.c-custom-checkbox input[type=checkbox] { 
 
    position: absolute; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    clip: rect(0 0 0 0); 
 
    height: 15px; 
 
    width: 15px; 
 
    padding: 0; 
 
    border: 0; 
 
    left: 0; 
 
} 
 
.c-custom-checkbox .c-custom-checkbox__img { 
 
    display: inline; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 15px; 
 
    height: 15px; 
 
    background-image: none; 
 
    background-color: #fff; 
 
    color: #000; 
 
    border: 1px solid #333; 
 
    border-radius: 3px; 
 
    cursor: pointer; 
 
} 
 
.c-custom-checkbox input[type=checkbox]:checked + .c-custom-checkbox__img { 
 
    background-position: 0 0; 
 
    background-color: tomato; 
 
}

<label class="c-custom-checkbox"> 
 
    <input type="checkbox" id="valueCheck" /> 
 
    <i class="c-custom-checkbox__img"></i>Some Label 
 
</label>

來源

2016-03-30 08:10:13

複選框使用無ID標籤（標籤CSS可以更改）

回答

相關問題