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

本文介绍了如何为标记为必需的字段定义CSS样式？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我有一个应用程序是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 possibleUpdate 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样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！