css - 输入标签后文本上的 CSS

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;
}

---

如果您不想将 a 分配class给span标签，也可以使用相邻选择器+，例如

演示

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

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

看这个演示

在不在标签中之前，您不能将样式设置为“双人床”。

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