CSS輸入標籤後的文字

Question

如果我有以下html代碼，我該如何爲「雙人牀」文本設置css樣式？

<input type="checkbox" name="room_type_uids[]" value="1" style="line-height: 8;height: 20px;">Double Bed<br /> 

Answer 1

除非您將文本包裝在某個容器元素中，否則不能設置該文本的樣式。可能senarios是..

自動換行中的一個元素，整個事情說div比你可以這樣做

<div class="wrap"> 
    <input type="checkbox" name="room_type_uids[]" value="1" style="line-height: 8;height: 20px;">Double Bed<br /> 
</div> 

.wrap { 
    color: #f00; 
} 

OR

簡單包紮span標籤內的文本.. 。

<input type="checkbox" name="room_type_uids[]" value="1" style="line-height: 8;height: 20px;"><span class="wrap_text">Double Bed</span><br /> 

.wrap_text { 
    color: red; 
} 

---

如果你不想分配class到span標籤，您還可以使用鄰近的選擇+像

Demo

input[name="room_type_uids[]"] + span { 
    color: red; 
} 

Answer 2

看到這個DEMO

你不能設置樣式到「雙人牀」之前，不是在標籤。

<span style="color:red">Double Bed</span> 

的複選框

您可以在vertical-align:middle樣式添加到您的複選框。所以複選框對齊中間。

<input type="checkbox" name="room_type_uids[]" value="1" style="line-height: 8;height: 20px; vertical-align:middle;">Double Bed<br /> 

Answer 3

輸入元素不是容器元素因此你無法控制造型或CSS規則通過定義<input type=checkbox> - 元素風格的複選框後面的文本。

您需要一個單獨的容器，該容器將包含文本併爲容器本身定義樣式，以將樣式應用於文本"Double Bed"。

所以使用以下命令：

<div style="line-height: 8;height: 20px;"> 
    <input type="checkbox" name="room_type_uids[]" value="1">Double Bed<br /> 
</div> 

Answer 4

纏上<label>其提供的可用性改進的元素。風格可以貼在標籤上。

例子：

<label style="color:#FF0000;"><input type="checkbox" name="room_type_uids[]" value="1" style="line-height: 8;height: 20px;">Double Bed</label><br />