Question

如果我有以下HTML代码，如何为“双人床”文字添加CSS样式？

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

Answer 1

除非您将文本包装在某个容器元素中，否则无法设置该文本的样式。可能的意外情况是..

将整个事物包裹在一个元素中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;
}

或

只需将文字包装在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

用<label>包裹元素，提高可用性。样式可以附在标签上。

示例：

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

Answer 3

请参阅 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 4

输入元素不是容器元素，因此 您无法控制 复选框后面的文本的样式或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>

输入标记后的文本CSS

4 个答案: