0

在我的表单中，我想让 HTML 标签一般加粗，但在标记单选按钮和复选框时不要加粗。

如何在默认情况下可以导入和工作的 CSS 中做到这一点，而不需要对样式进行本地覆盖？

单选标签示例（不应为粗体）

<label for="banana">
<input type="radio" name="banana" id="banana" value="banana" />Banana
</label>

示例非无线电标签（应为粗体）

<label for="id">ID</label>
<input type="text" size="12" id="id" name="id" />

如果有帮助，可以更改我关联标签的方式。

谢谢！

4

5 回答 5

2

如果不给正确的标签一个类或使用 Javascript，你就无法做到这一点。使用 jQuery 选择器，您可以这样做：

$("label:not(:has(radio))").addClass("boldmenow");
...
.boldmenow {
  font-weight: bold;
}
于 2009-02-17T10:55:35.153 回答
1

如果将标记扩展到以下内容：

<label for="banana">
    <input type="radio" name="banana" id="banana" value="banana" /><span>Banana</span>
</label>

然后你可以使用这个 CSS：

label {
    font-weight: bold;
}
label span {
    font-weight: normal;
}
于 2009-02-17T11:03:31.700 回答
1

简短的回答是你不能，可靠。如果您试图使其在许多常用浏览器（例如 IE6、7、Firefox 等）中工作，则必须依靠 JavaScript 而不是 CSS 来识别文档中符合您的样式规则的元素并应用对这些元素中的每一个进行分类。

为了跨浏览器兼容性，您需要将数组字段标签包装在分类元素中，或者将类应用于标签以将它们与普通标签分开。

我在这里要做的是将单选选项列表包装在一个（无）有序列表（用于语义）中，并将普通文本字段包装在一个段落中。

例如正常名称：值对：

<div class="form_row">
  <label for="txtFirstName">First Name</label>
  <p>
    <input type="text" class="text" name="firstName" id="txtFirstName" />
  </p>
</div>

然后对于 Name:Array 对：

<div class="form_row">
  <label>Gender</label>
  <ul>
    <li><label for="rdoGenderMale"><input type="radio" class="radio" name="gender" id="rdoGenderMale" value="male" />&nbsp;Male</label></li>
    <li><label for="rdoGenderFemale"><input type="radio" class="radio" name="gender" id="rdoGenderFemale" value="female" />&nbsp;Female</label></li>
  </ul>
</div>

现在要适当地设置它的样式，您可以为名称标签编写常规规则：

div.form_row label {font-weight:bold;}
div.form_row ul {list-style:none;}
  div.form_row ul label {font-weight:normal;}

hth，恩多芬

于 2009-02-17T12:06:11.753 回答
0

您可以为单选按钮的标签添加一个类，然后对它们进行不同的样式设置。

<label for="banana" class="radio">

然后CSS可以默认使标签加粗，然后覆盖它以使收音机正常。

label { font-weight: bold }
label.radio { font-weight: normal; }
于 2009-02-17T10:53:10.993 回答
0

基本上，你不能因为 IE 不支持它（所以改用一个类），但如果 IE 工作正常并且 CSS3 得到很好的支持，你可以使用像这样的通用兄弟选择器：

input[type="radio"]~label {font-weight: bold;}

请注意，IE 也不真正支持那里的属性选择器。

于 2009-02-17T10:57:47.783 回答