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