Question

我有一个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}我希望尽可能避免使用

更新只是为了澄清一下 - 如果有＆＃34; required＆＃34;属性无论是否有required类。我的初始问题可以解释为我想要在需要时设置元素的样式，但是没有必需的类。事实并非如此。遗憾。

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

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

有多种可能性，希望您能找到满足您需求的最佳选择。

Answer 2

OWASP

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

:required

:not

Answer 3

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

Answer 4

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

Answer 5

您可以直接使用

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

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

Answer 6

我不知道你是否熟悉CSS3。如果你不这样做，只是说CSS3的一个很棒的功能是选择器。像jQuery选择器之类的东西，但更好的是因为没有涉及编程。

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

希望它会对你有所帮助。

注意： W3Schools有更多与网络技术相关的内容。 Page也适用于财团W3C的标准。

如何为标记为必需的字段定义CSS样式？

6 个答案: