添加星号到bootstrap 3中的必填字段?

我的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; } 

尽pipe如此,在所需字段周围并没有出现红色* 。 我在这里错过了什么? 在bootstrap 3中没有直接的方法来将*引入到必填字段中。

编辑:*条款和条件不会立即显示checkbox.how来解决这个问题? 在这里输入图像说明

5 Solutions collect form web for “添加星号到bootstrap 3中的必填字段?”

使用.form-group.required没有空格。

 .form-group.required .control-label:after { content:"*"; color:red; } 

编辑:

对于checkbox,您可以使用伪类:not()。 除非是checkbox,否则在每个标签后添加必需的*

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

注意:未经testing

您应该使用.text类或目标,否则可能试试这个HTML:

 <div class="form-group required"> <label class="col-md-2 control-label">&#160;</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">&#160;</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> 

假设这是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"; 

.form-group .required .control-label:after .form-group.required .control-label:after .form-group .required .control-label:after应该是.form-group.required .control-label:after 。 .form-group和.required之间的空格被移除是变化。

另外两个答案是正确的。 当你在CSSselect器中包含空格时,你的目标是子元素:

 .form-group .required { styles } 

定位元素中的“必需”类,该元素位于具有“form-group”类的元素中。

没有空间的目标是一个有两个类的元素。 “必需的”和“forms组”

这个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> 
  • 使用Bootstrap3的响应时间线用户界面
  • 什么是sr-only Bootstrap 3?
  • Bootstrap跨度和列有什么区别?
  • Twitter Bootstrap 3如何改变版本2.3.2?
  • Bootstrap 3面板头button位置错误
  • Bootstrap 3手风琴button切换“data-parent”不起作用
  • 在引导程序中使用容器stream体会导致水平滚动条
  • 引导3模态火灾并导致页面左移/浏览器滚动条问题
  • 响应式网站在手机上全长缩小
  • Bootstrap中col-lg- *,col-md- *和col-sm- *有什么不同?
  • Bootstrap 3 Glyphicons不起作用