如何为标记为必填的字段定义 CSS 样式?
Posted
技术标签:
【中文标题】如何为标记为必填的字段定义 CSS 样式?【英文标题】:How to define CSS style for fields marked as required? 【发布时间】:2016-09-04 22:48:20 【问题描述】:我有一个应用程序是 AngularJS 和 Bootstrap,虽然我不确定它是否相关。我想为必填字段定义 CSS 样式。如果字段有class='required'
,我会看到很多示例,例如here:
.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
,但由于某种原因它没有做任何事情,尽管我在 F12 中看到了<div class="form-group" required="required">
【问题讨论】:
能否请您添加有关输入标签的html代码。 你的意思是通过检查输入类型的必需属性并添加*
<input type="text" name="usrname" required>
?
if the field has required='required' - 在链接的线程中,div
具有类而不是字段。您是说您的 HTML 在 div
上具有 required 属性吗?
【参考方案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>
有多种可能性,希望您能找到最适合您需求的。
【讨论】:
从问题看来,OP 正在尝试使用:after
元素添加 * 符号。如果是这样的话,这是行不通的。伪元素不能添加到输入元素中。
@Harry 你可能是对的。我只是根据我对这一行的回答“但是,如果该字段有 required='required',但没有必需的类,是否可以这样做?”。我的 sn-p 完成了这项工作,这就是我回答的原因:)
@thepio - 我意识到我最初的问题有些误导;我放了一个更新。我想我可以从您的回答开始,但如果您有其他指导 - 我将不胜感激!
好的,我更新了我的答案,希望它现在是你需要的 :)
@Felix:您实际上不需要将属性指定为required=required
。这是一个布尔属性,只需required
就足够了。例如<input required>
或 <div required>
。您还需要适应它,.form-group[required="required"]
选择器不会剪切。您只需要div[required]
或div.form-group[required]
。请参阅此处 - jsfiddle.net/abhitalks/aa24x2eq 并检查最后一个标签如何没有星号。【参考方案2】:
:required:not(.required)
background-color: #aca1e4;
<input type="text" class="required" required="required" />
<input type="text" required="required" />
:required
:not
【讨论】:
如果你能添加一些描述或解释功能会很好 应包含外部链接作为参考,但答案应包含一些基本信息。只需添加有关 css 选择器的说明以及它如何解决 OP 的问题,将来也会对其他人有所帮助。【参考方案3】:.form-group .required
content:"*";
color:red;
【讨论】:
【参考方案4】:您可以使用 :required 伪选择器类。
【讨论】:
【参考方案5】:可以直接使用
<input type="text" id="name" class="form-control" required/>
此输入字段将不接受 null 或空字符串。 如果它为空,则输入框边框将显示为红色。
【讨论】:
【参考方案6】:我不知道你是否熟悉 CSS3。如果你不知道,我只想说 CSS3 的一个很棒的特性是 选择器。类似于 jQuery 选择器,但更好,因为不涉及编程。
这是我的参考页面,W3Schools - CSS Selectors。
希望对你有帮助。
注意: W3Schools 有更多与网络技术相关的内容。 Page 还应用了 W3C 联盟的标准。
【讨论】:
是的,我熟悉 CSS3 和选择器。不过还是谢谢啦以上是关于如何为标记为必填的字段定义 CSS 样式?的主要内容,如果未能解决你的问题,请参考以下文章