Question

我正在使用bootstrap和glyphicons。我需要在每个必填字段后添加星号。放大后，我希望位置保持不变。

  <form class="well form-horizontal" action=" " method="post" 
    id="user_edit">
   <div class="form-group">

      <div class="col-md-8 inputGroupContainer">
         <div class="input-group "><span class="input-group-addon">
         <i class="glyphicon glyphicon-user"></i></span>
         <input type="text" placeholder="First Name" class="form-control" 
         name="first_name" value='<?php echo $profile_fields[0]["value"];?>' 
        id="first_name" maxlength="50" />
         </div>
      </div>
     </div>
 </form>

Answer 1

只需使用::after将星号放在字段后面即可。当用户放大时，它应该保持在相同的位置。

.required::before {
  position: absolute;
  left: -10px;
  top: 0;
  content: '*';
  color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="well form-horizontal" action=" " method="post" 
    id="user_edit">
   <div class="form-group">

      <div class="col-md-8 inputGroupContainer ">
         <div class="input-group required"><span class="input-group-addon">
         <i class="glyphicon glyphicon-user"></i></span>
         <input type="text" placeholder="First Name" class="form-control" 
         name="first_name" value='' 
        id="first_name" maxlength="50" />
         </div>
      </div>
     </div>
 </form>

注意：将所有必填字段（input-group）设为不同的类，例如required。

如何在输入字段后添加星号，放大后位置相同

1 个答案: