カスタマイズした入力フィールド

Question

次の図のように入力フィールドに緑のラベルを追加します。私はいろいろな方法を試していますが、まだできませんでした。 アイデア!!!

私はページレイアウトを設計するためにブートストラップを使用しています。影は大丈夫ではなく、ラベルだけが問題です。

<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

あなたのCSSフレームワークとしてのBootstrap使用しているので、あなたはinput-group-addonクラスをカスタマイズすることによって、これを達成することができます。

それについて詳しく読む：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

Answer 2

inputは、他の要素を含むことができないので、あなただけの親divの上:before擬似要素を追加することができます。もう1つは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>