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

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

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

但是,如果字段必须=’required’,但是没有必需的类,是否可以这样做？

实际上,我有一个有条件要求使用ng-required =’chkChecked’的字段,而我还可以添加ng-class = {‘required’：chkChecked}我希望尽可能避免使用它

更新只是为了澄清 – 如果它具有“required”属性,我想要对该字段设置样式,无论它是否具有必需的类.我的初始问题可以解释为我想要在需要时设置元素的样式,但是没有必需的类.事实并非如此.抱歉.

另外,我更喜欢在附加到输入字段的标签上放一个星号,而不是附加到字段本身的红色边框(可以通过输入[：required]完成(我不知道)我确实尝试过.form-group：required,但由于某些原因它没有做任何事情,虽然我在F12中看到< div class =“form-group”required =“required”>

解决方法

如果我理解正确,就可以这样.

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>

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

原文链接：https://www.f2er.com/css/216184.html

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

解决方法

猜你在找的CSS相关文章