如何設置HTML複選框的文本樣式？

有了這個輸入複選框：如何設置HTML複選框的文本樣式？

<input type="checkbox">Click moi!

...這CSS：

input[type=checkbox] { 
    color:green; 
    font-family: Consolas, Baskerville, 'Segoe UI', sans-serif; 
} 

input[type=checkbox]:hover { 
    box-shadow:0px 0px 10px #1300ff; 
}

...懸停位工作正常（本身的變化複選框），但對顏色/字體文本（「點擊moi！」）不受設置顏色和字體系列的影響。

的jsfiddle：http://jsfiddle.net/QRBEx/

我能如何影響這個文本通過CSS屬性？

來源

2013-11-15 B. Clay Shannon

的文字應該是一個label內。添加for屬性以將其附加到複選框。

jsFiddle example - 它的工作原理。

<input id="checkbox" type="checkbox"/><label for="checkbox">Click me</label>

然後更改CSS：

label { 
    color:green; 
    font-family: Consolas, Baskerville, 'Segoe UI', sans-serif; 
} 

input[type=checkbox]:hover { 
    box-shadow:0px 0px 10px #1300ff; 
}

來源

2013-11-15 17:23:17

<input>標籤沒有結束標籤 - 它是一個自閉標籤。所以它旁邊的文本不是它的一部分。您需要將文本分別設置爲自己的元素，例如<label>。

來源

2013-11-15 17:21:51

一個好主意是使用<span>標籤：

<style> 
    #cb_span{color:green;} 
</style> 
<input type="checkbox"><span id="cb_span">Click moi!</span>

來源

2013-11-15 17:22:19 gibberish

這段文字不是複選框的一部分。這是正常的浮動文本，它屬於它的容器（也是複選框的容器）。如果您將您的chackbox + text對包裹在某個容器中，例如

<div id="container"> 
    <input type="checkbox">Click moi! 
</div>

那麼你可以添加這樣的CSS

#container { 
    color:green; 
    font-family: Consolas, Baskerville, 'Segoe UI', sans-serif; 
}

來源

2013-11-15 17:22:40 matewka

一是正確標記的文本。你有一個輸入標籤，使用一個標籤元素。

<input type=checkbox id=myCheckbox> <label for=myCheckbox> Click moi! </label>

然後，作一個假設，一個複選框標籤將始終緊跟在標記該複選框，並使用相鄰的兄弟組合子：

input[type="checkbox"] + label { 

}

來源

2013-11-15 17:23:19 Quentin

文本本身不是部分input元素。通過而非把在一個HTML元素的文本，並使用了CSS掛羊頭賣狗肉的，我們可以在包括小提琴更改文本，如：

http://jsfiddle.net/QRBEx/8/

來源

2013-11-15 17:23:40 Roberto

文本必須在標籤。爲複選框創建一個標籤。我希望這有助於

來源

2017-12-22 04:00:19

這不是評論框 – Billa

這種情況會有何幫助？有一個4歲的*接受*的答案，不僅說同樣的事情，而且還提供附帶的代碼。你認爲你在貢獻什麼？ –

如何設置HTML複選框的文本樣式？

回答

相關問題