Question

我正在尝试设置输入标签的样式。我插入了样式标签，但它不起作用。

    <span class="form-group has-failure has-feedback">
        <label style="color:#666666;"> Warranty </label>
        <input style="color:#666666;" type="radio" name="warranty" value="true">Yes</input>
        <input style="color:#666666;" type="radio" name="warranty" value="false">No</input>
    </span>

Answer 1

由于多种原因，您的代码不正确。你应该尝试使用语义代码并避免使用内联样式（使用带有适当选择器的外部CSS）

（建议）加价：

<span class="form-group has-failure has-feedback">
    <h3>Warranty</h3>
    <input type="radio" name="warranty" id="warranty_yes" value="true" /><label for="waranty_yes">Yes</label>
    <input type="radio" name="warranty" id="warranty_no" value="false" /><label for="waranty_yes" />No</label>
</span>

CSS：：

label {color:#666;}

注意：选择器非常通用，并且会定位所有<label>标记，您可能希望通过在不同的标签标记上使用不同的css类来定位特定的标记...

小提琴，如果需要......

jsFiddle

为什么不使用内联样式？

由于多种原因，这被认为是一种不好的做法。我要提到的主要原因是：

易于维护：如果您希望更改颜色，最好只更新1个CSS文件而不是所有页面中的所有“样式”属性
关注点分离：HTML应该只包含内容，所有布局/ UI都应该移动到其他地方（CSS文件）。内联javascript也是如此，应该避免使用extrnal JS file /
较低的特异性：What is specificity

为什么使用语义代码更好？

这个案例是更好的语义=更好的用户体验的一个很好的例子。使用<label>标记时，可以使用for属性将其链接到所需控件，其值与相关输入元素的id相对应。通过这样做，您将允许您的用户仅通过单击标签文本来检查单选按钮/复选框，他们不必瞄准按钮self，这样可以改善UX，特别是在较小的设备上。如果将<label>与文本输入一起使用，单击标签会将焦点（光标）放在文本字段等上...

Answer 2

假设您正在尝试设置文字样式：广播输入不包含文字。您希望将附带的文本放在标签中，您可以将其着色：

<div class="form-group has-failure has-feedback">
  <label style="color:#666666;"> Warranty </label>
  <input type="radio" name="warranty" value="true"/>
  <label style="color:#666666;">Yes</label>
  <input type="radio" name="warranty" value="false"/>
  <label style="color:#666666;">No</label>
</div>

我不建议使用跨度，因为表单标签属于标签，而不是跨度。

Answer 3

您可以使用以下代码..

<span class="form-group has-failure has-feedback">
    <label style="color:blue;"> Warranty </label>
<input style="color:#666666;" type="radio" name="warranty" value="true" /> <span style="color:red">Yes</span>
<input type="radio" name="warranty" value="false" /><span style="color: red;">NO</span>
</span>

jsfiddle Preview

您可以使用带有输入广播的样式的span标记。

Answer 4

CSS中的颜色属性是字体颜色或文本颜色，也许可以看一下这个链接。关于样式输入有很多信息。

http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

HTML：

    <input type="checkbox" id="c1" name="cc" />
<label for="c1">Check Box 1</label>

CSS：

    input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

如何设置输入标签内的文字样式？

4 个答案: