在 Bootstrap 3 中为必填字段添加星号
Posted
技术标签:
【中文标题】在 Bootstrap 3 中为必填字段添加星号【英文标题】:Adding asterisk to required fields in Bootstrap 3 【发布时间】:2014-06-02 05:44:23 【问题描述】:我的 html 有一个名为 .required
的类,它分配给必填字段。
这是 HTML:
<form action="/accounts/register/" method="post" role="form" class="form-horizontal">
<input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
<div class="form-group required">
<label class="col-md-2 control-label">Username</label>
<div class="col-md-4">
<input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" />
</div>
</div>
<div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">first name</label><div class="col-md-4"><input class="form-control" id="id_first_name" maxlength="30" name="first_name" placeholder="first name" required="required" title="" type="text" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">last name</label><div class="col-md-4"><input class="form-control" id="id_last_name" maxlength="30" name="last_name" placeholder="last name" required="required" title="" type="text" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label"> </label><div class="col-md-4"><div class="checkbox"><label><input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service</label></div></div></div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-star"></span> Sign Me Up!
</button>
</div>
</div>
</form>
我在我的 CSS 中添加了以下内容;
.form-group .required .control-label:after
content:"*";color:red;
仍然没有在必填字段周围显示红色*
。我在这里想念什么? Bootstrap 3中没有直接的方法将*
引入必填字段吗?
编辑
条款和条件中的*
不会立即出现在复选框中。如何解决这个问题?
【问题讨论】:
请标记已回答的问题。 【参考方案1】:使用不带空格的.form-group.required
。
.form-group.required .control-label:after
content:"*";
color:red;
编辑:
对于复选框,您可以使用伪类:not()。您在每个标签后添加所需的 *,除非它是一个复选框
.form-group.required:not(.checkbox) .control-label:after,
.form-group.required .text:after /* change .text in whatever class of the text after the checkbox has */
content:"*";
color:red;
注意:未测试
您应该使用 .text 类或以其他方式定位它,试试这个 html:
<div class="form-group required">
<label class="col-md-2 control-label"> </label>
<div class="col-md-4">
<div class="checkbox">
<label class='text'> <!-- use this class -->
<input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
</label>
</div>
</div>
</div>
好的第三次编辑:
CSS 回到原来的样子
.form-group.required .control-label:after
content:"*";
color:red;
HTML:
<div class="form-group required">
<label class="col-md-2"> </label> <!-- remove class control-label -->
<div class="col-md-4">
<div class="checkbox">
<label class='control-label'> <!-- use this class as the red * will be after control-label -->
<input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
</label>
</div>
</div>
</div>
【讨论】:
我试过编辑过的,但没有用。你能查一下吗? 改变一些东西,也在 CSS 中 似乎不是通用的 BS3,而是自定义的 CSS?它看起来也对我有反应,所以也许可以添加这个(到你的 BS 主题文件,例如bootstrap-theme.css
)。
要区分伪类和伪元素,您可以使用::after
。 Level 3 CSS 猜测已经结束。【参考方案2】:
假设这就是 HTML 的样子
<div class="form-group required">
<label class="col-md-2 control-label">E-mail</label>
<div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div>
</div>
在标签右侧显示星号:
.form-group.required .control-label:after
color: #d00;
content: "*";
position: absolute;
margin-left: 8px;
top:7px;
或者在标签的左边:
.form-group.required .control-label:before
color: red;
content: "*";
position: absolute;
margin-left: -15px;
要制作漂亮的大红色星号,您可以添加以下几行:
font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 14px;
或者,如果您使用的是Font Awesome,请添加这些行(并更改内容行):
font-family: 'FontAwesome';
font-weight: normal;
font-size: 14px;
content: "\f069";
【讨论】:
top:7px;
如果标签是多行的,则会导致问题。例如,最好用margin-top: -4px;
替换它。【参考方案3】:
.form-group .required .control-label:after
应该是.form-group.required .control-label:after
。删除 .form-group 和 .required 之间的空格是变化。
【讨论】:
谢谢!也适用于带有.control-group.required .control-label:after content:"*"; color:red;
的引导程序 2.3【参考方案4】:
另外两个答案是正确的。当您在 CSS 选择器中包含空格时,您的目标是子元素:
.form-group .required
styles
正在定位一个具有“必需”类的元素,该元素位于具有“form-group”类的元素内。
如果没有空格,它会针对具有 both 类的元素。 “必需”和“表单组”
【讨论】:
这是与您的原始问题不同的问题。但是你的 CSS 正在做你告诉它的事情。它将星号与标签字段(对于您的条款和条件为空白)而不是输入字段。如果您希望它们一起出现,则必须在 HTML 中将它们组合在一起。但是你有一个空白的标签字段,这很糟糕。我会放弃条款和条件上的标签,但保留验证。【参考方案5】:使用简单的 CSS,
.myform .required:after
content: " *";
color: red;
font-weight: 100;
<form class="myform">
<div class="col-md-12">
<label for="xxx_fname" class="form-label required">First Name</label>
<input type="text" class="form-control" id="xxx_fname" >
</div>
<div class="col-md-12">
<label for="xxx_lname" class="form-label required">Last Name</label>
<input type="text" class="form-control" id="xxx_lname" >
</div>
</form
【讨论】:
【参考方案6】:这个 CSS 对我有用:
.form-group.required.control-label:before
color: red;
content: "*";
position: absolute;
margin-left: -10px;
还有这个 HTML:
<div class="form-group required control-label">
<label for="emailField">Email</label>
<input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" />
</div>
【讨论】:
在包含标签和输入的 div 上有 control-label 有点奇怪。 我同意,控制标签和表单组一起使用很奇怪【参考方案7】:这对我有用:
CSS
.form-group.required.control-label:before
content: "*";
color: red;
或
.form-group.required.control-label:after
content: "*";
color: red;
基本 HTML
<div class="form-group required control-label">
<input class="form-control" />
</div>
【讨论】:
【参考方案8】:我修改了 css,因为我使用的是 bootstrap 3.3.6
.form-group.required label:after
color: #d00;
font-family: 'FontAwesome';
font-weight: normal;
font-size: 10px;
content: "\f069";
top:4px;
position: absolute;
margin-left: 8px;
HTML
<div class="form-group required">
<label for="return_notes"><?= _lang('notes') ?></label>
<textarea class="form-control" name="return_notes" id="return_notes" required="required"></textarea>
</div>
【讨论】:
以上是关于在 Bootstrap 3 中为必填字段添加星号的主要内容,如果未能解决你的问题,请参考以下文章