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

Question

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

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

但是，如果该字段具有 required='required' 是否可以执行相同的操作？ , 但没有 required类(class)？

实际上，我有一个使用 ng-required='chkChecked' 有条件要求的字段虽然我也可以添加 ng-class={'required': chkChecked}如果可能的话，我宁愿避免它

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

此外，我更愿意在附加到输入字段的标签上放置一个星号，而不是附加到该字段本身的红色边框(这可以通过 input[:required] 完成(我不知道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>

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