如何为标记为必需的字段定义CSS样式？ [英] How to define CSS style for fields marked as required?

问题描述

我有一个应用程序是AngularJS和Bootstrap，虽然我不知道是否相关。我想为必需的字段定义CSS样式。我看到很多例子，如果字段有 class ='required'，例如此处：

  .form-group.required。 control-label：{
内容：*; 
 color：red; 
} 
  

但是，如果字段有 required ='required'，但没有必需 class？

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

更新 - 如果它具有必需属性，则不管是否具有必需类，我想对该字段设置样式。我的初始问题可以解释为我想要样式的元素，如果它是必需的，但没有必要的类。不是这样的。对不起，

此外，我更喜欢在附加到输入字段的标签上放一个星号，而不是一个红色边框附加到字段本身可以通过 input [：required] （我不知道）完成，我尝试了 .form-group：required ，但由于某种原因它不做任何事情，虽然我看到< div class =form-grouprequired =required> F12

解决方案

如果我正确理解你可能是这样。

  input [required =required]：not（.required）{border：2px solid red;}  

 < input type =textclass =requiredrequired =required >< / input>< input type =textrequired =required>< / input>   
 
 
 根据修改过的问题修改： 
 
 
 
也许这是答案正在寻找。
 
 
 
 
 
 
  .form-group [required =required] input：not（.required）{border：1px solid black;}。form-group [required =required] input {border：1px solid red;}。 content：*; color：red;} / *只有必需的属性* /。form-group [必须] input {border：1px solid red;}。form-group [required] label：after {content：*; color：red;}  
 
 < div class = -grouprequired =required> < label for =test1>必需< / label> < input id =test1type =textrequired =required>< / input>< / div>< div class =form-grouprequired =required> < label for =test2>必需< / label> < input id =test2type =textclass =required>< / input>< / div>< div class =form-grouprequired =required> < label for =test3>必需< / label> < input id =test3type =text>< / input>< / div>< div class =form-grouprequired =required> < label for =test4>必需< / label> < input id =test4type =textclass =requiredrequired =required>< / input>< / div>< div class =form-grouprequired = > < label for =test5>必需< / label> < input id =test5type =textclass =required>< / input>< / div>< div class =form-grouprequired =required> < label for =test6>必需< / label> < input id =test6type =text>< / input>< / div>< h5>只有在评论中建议的必填属性，才能帮助未来某人< / h5> ;< div class =form-grouprequired> < label for =test6>必需< / label> < input id =test6type =text>< / input>< / div>  
 
 
 
 
 
 
有多种可能性，希望您能找到满足您需求的最佳方案。
 
I have an application that is AngularJS and Bootstrap, although I am not sure if it is relevant. I want to define CSS style for required fields. I see many examples if the field has class='required', for example here:
.form-group.required .control-label:after {
   content:"*";
   color:red;
}
However, is it possible to do the same if the field has required='required', but doesn't have required class?

As a practical matter, I have a field that is conditionally required using ng-required='chkChecked' and while I can also add ng-class={'required': chkChecked} I would prefer to avoid it if possible

Update just to clarify - I want to style the field if it has "required" attribute regardless whether it has required class. My initial question could be interpreted that I want to style the element if it is required, but doesn't have required class. That's not the case. Sorry.

Also, I would prefer to put an asterisk on the label attached to the input field, rather than, say, a red border attached to the field itself (which can be accomplished by input[:required] (that I didn't know about). I did try .form-group:required, but for some reason it doesn't do anything, although I see <div class="form-group" required="required"> in F12
解决方案
If I understood you correctly it is possible like this.



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

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





EDIT based on the modified question:

Maybe this would be the answer you are looking for.



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





There's multiple possibilities and hopefully you can find the best that suites your needs.

                        
这篇关于如何为标记为必需的字段定义CSS样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！