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

Question

我有一个AngularJS和Bootstrap的应用程序,虽然我不确定它是否相关.我想为必填字段定义CSS样式.我看到很多例子,如果字段class='required',例如这里:

.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,但由于某种原因它没有做任何事情,虽然我<div class="form-group" required="required">在F12 看到

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

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

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

:需要

:不