输入栏自定义

Question

I would like to add the green label to the input field like the following picture. It is one day I am trying different methods but I could not do it yet. any ideas!!!

I am using bootstrap responsive to design the page layout. The shadow is okay not, only the problem is the label.

<div class="row-fluid">
 <div class="span12" align="center">
  <div class="row-fluid">
   <div class="span2"></div>
    <div class="span4">
        <input type="text" class="form-control" name="name" placeholder="Nome"/>
    </div>
    <div class="span4">
        <input type="text" class="form-control" name="Family" placeholder="Cognome"/>
    </div>
    <div class="span2"></div>
  </div>
 </div>
</div>

Answer 1

You can just add :before pseudo-element on parent div because input can not contain other elements. Here is another Example .

 input { padding: 10px 20px; border: 1px solid #D0D1D2; box-shadow: 0px 5px 5px 0px #DAD9E0; } .element { position: relative; } .element:before { position: absolute; content: ''; width: 10px; height: 10px; background: #00E09E; top: 50%; left: 0; transform: translate(-50%, -50%); } 

 <div class="element"> <input type="text" placeholder="Some Text"> </div> 

Answer 2

Since you're using Bootstrap as your CSS framework, you can achieve this by customizing the input-group-addon class.

Read more about it: http://getbootstrap.com/components/#input-groups

HTML:

<div class="container">
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">
      <div class="square"></div>
    </span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
  </div>
</div>

CSS:

.input-group-addon{
  border: 0px !important;
  background: transparent !important;
  position: absolute !important;
  top: 4px !important;
  left: -19px !important;
  z-index: 9999 !important;
}
.square{
  width:15px!important;
  height:15px!important;
  background: green!important;
}

Demo