将星号添加到Bootstrap 3中的必填字段

时间：2014-04-17 19:31:28

标签： css forms twitter-bootstrap-3 form-fields

我的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">&#160;</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中直接引入*到必填字段？

修改

条款和条件中的*不会立即出现在复选框中。如何解决这个问题？

enter image description here

8 个答案:

答案 0 :(得分：254)

在没有空格的情况下使用.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">&#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>

答案 1 :(得分：65)

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

答案 2 :(得分：7)

.form-group .required .control-label:after应该是.form-group.required .control-label:after。删除.form-group和.required之间的空格就是改变。

答案 3 :(得分：4)

另外两个答案是正确的。当您在CSS选择器中包含空格时，您将以子元素为目标：

.form-group .required {
    styles
}

定位具有“required”类的元素，该元素位于具有“form-group”类的元素内。

没有空间，它的目标是具有两个类的元素。 'required'和'form-group'

答案 4 :(得分：1)

这个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>

答案 5 :(得分：0)

这对我有用：

CSS 

git --git-dir .git/modules/<submodule> tag

OR 

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

基本HTML 

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

答案 6 :(得分：0)

我修改了css，就像我正在使用bootstrap 3.3.6 

except: 
            #this part runs for any corrupted file
            sqs_msg_response = queue_client.send_message(MessageBody='Data Processing num_failed')
            print('messageID',sqs_msg_response.get('MessageId'))
            subject = 'Data file is not processed'
            body='''the {}file is not processed at the time{}'''.format(string,current_time)
            message = {"Subject":{"Data":subject},"Body":{"Html":{"Data":body}}}
            email_response = email_client.send_email(
            Source="xyz@gmail.com",
            Destination={
                "ToAddresses":[
                    "abc@gmail.com",
                    ]
                },
            Message=message
            )

HTML 

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

答案 7 :(得分：0)

使用简单的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

相关问题
最新问题