如何为标记为必填的字段定义 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 就足够了。例如&lt;input required&gt;&lt;div required&gt;。您还需要适应它,.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 样式?的主要内容,如果未能解决你的问题,请参考以下文章

定义非空约束

代码首先为必填字段生成可为空的列

Django,模型和表单:替换“此字段为必填项”消息

如何使模板中的所有字段在TFS中成为必填?

php 验证所传参数为必填的时候的验证逻辑

在 Bootstrap 3 中为必填字段添加星号