如何为标记为必填的字段定义 CSS 样式？答案

【问题标题】：How to define CSS style for fields marked as required?如何为标记为必填的字段定义 CSS 样式？
【发布时间】：2016-09-04 22:48:20
【问题描述】：

我有一个应用程序是 AngularJS 和 Bootstrap，虽然我不确定它是否相关。我想为必填字段定义 CSS 样式。如果字段有class='required'，我会看到很多示例，例如here：

.form-group.required .control-label:after {
   content:"*";
   color:red;
}

但是，如果字段有required='required'，但没有required 类，是否可以这样做？

实际上，我有一个使用ng-required='chkChecked' 有条件地需要的字段，虽然我也可以添加ng-class={'required': chkChecked}，但我希望尽可能避免使用它

更新只是为了澄清 - 如果它具有“必需”属性不管是否具有 required 类，我想设置该字段的样式。我最初的问题可以解释为如果需要，我想为元素设置样式，但没有必需的类。事实并非如此。对不起。

另外，我更愿意在附加到输入字段的标签上加上一个星号，而不是在字段本身附加一个红色边框（这可以通过input[:required] 完成（我不知道关于）。我确实尝试过.form-group:required，但由于某种原因它没有做任何事情，尽管我在 F12 中看到了<div class="form-group" required="required">

【问题讨论】：

能否请您添加有关输入标签的HTML代码。
你的意思是通过检查输入类型的必需属性并添加*<input type="text" name="usrname" required>？
if the field has required='required' - 在链接的线程中，div 具有类而不是字段。您是说您的 HTML 在 div 上具有 required 属性吗？

标签： angularjs twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

如果我理解正确的话，可能是这样的。

input[required="required"]:not(.required) {
  border: 2px solid red;
}

<input type="text" class="required" required="required"></input>
<input type="text" required="required"></input>

根据修改后的问题进行编辑：

也许这就是您正在寻找的答案。

.form-group[required="required"] input:not(.required) {
  border: 1px solid black;
}

.form-group[required="required"] input {
  border: 1px solid red;
}

.form-group[required="required"] label:after { 
  content:" *"; 
  color: red;
}

/* With only the required attribute */

.form-group[required] input {
  border: 1px solid red;
}

.form-group[required] label:after { 
  content:" *"; 
  color: red;
}

<div class="form-group" required="required">
  <label for="test1">Required</label>
  <input id="test1" type="text" required="required"></input>
</div>
<div class="form-group" required="required">
  <label for="test2">Required</label>
  <input id="test2" type="text" class="required"></input>
</div>
<div class="form-group" required="required">
  <label for="test3">Required</label>
  <input id="test3" type="text"></input>
</div>
<div class="form-group" required="required">
  <label for="test4">Required</label>
  <input id="test4" type="text" class="required" required="required"></input>
</div>
<div class="form-group" required="required">
  <label for="test5">Required</label>
  <input id="test5" type="text" class="required"></input>
</div>
<div class="form-group" required="required">
  <label for="test6">Required</label>
  <input id="test6" type="text"></input>
</div>
<h5>With only required attribute as suggested in the comments for the possibility to help someone in the future</h5>
<div class="form-group" required>
  <label for="test6">Required</label>
  <input id="test6" type="text"></input>
</div>

有多种可能性，希望您能找到最适合您需求的。

【讨论】：

从问题看来，OP 正在尝试使用 :after 元素添加 * 符号。如果是这样的话，这是行不通的。伪元素不能添加到输入元素中。
@Harry 你可能是对的。我只是根据我对这一行的回答“但是，如果该字段有 required='required'，但没有必需的类，是否可以这样做？”。我的 sn-p 完成了这项工作，这就是我回答的原因:)
@thepio - 我意识到我最初的问题有些误导；我放了一个更新。我想我可以从您的回答开始，但如果您有其他指导 - 我将不胜感激！
好的，我更新了我的答案，希望它现在是你需要的 :)
@Felix：您实际上不需要将属性指定为required=required。这是一个布尔属性，只需required 就足够了。例如<input required> 或 <div required>。您还需要适应它，.form-group[required="required"] 选择器不会剪切。您只需要div[required] 或div.form-group[required]。请参阅此处 - jsfiddle.net/abhitalks/aa24x2eq 并检查最后一个标签如何没有星号。

【解决方案2】：

:required:not(.required) {
  background-color: #aca1e4;
}

<input type="text" class="required" required="required" />
<input type="text" required="required" />

:required

:not

【讨论】：

如果你能添加一些描述或解释功能会很好
应包含外部链接作为参考，但答案应包含一些基本信息。只需添加有关 css 选择器的说明以及它如何解决 OP 的问题，将来也会对其他人有所帮助。

【解决方案3】：

.form-group .required {
   content:"*";
   color:red;
}

【讨论】：

【解决方案4】：

您可以使用 :required 伪选择器类。

【讨论】：

【解决方案5】：

可以直接使用

<input type="text" id="name" class="form-control"  required/>

此输入字段将不接受 null 或空字符串。如果它为空，则输入框边框将显示为红色。

【讨论】：

【解决方案6】：

我不知道你是否熟悉 CSS3。如果你不知道，我只想说 CSS3 的一个很棒的特性是 选择器。类似于 jQuery 选择器，但更好，因为不涉及编程。

这是我的参考页面，W3Schools - CSS Selectors。

希望对你有帮助。

注意： W3Schools 有更多与网络技术相关的内容。 Page 还应用了 W3C 联盟的标准。

【讨论】：

是的，我熟悉 CSS3 和选择器。不过还是谢谢啦