私はこのコードを取得探しているテキスト入力

Question

の境界線の内側テキスト配置：基本的に私はそれだけで見てみたいこのtext inputのように見えるように

<form id="first_name"> 
    <div class="form-group"> 
     <label>First name</label> 
     <input type="text" class="form-control input-lg" /> 
    </div> 
</form> 

を引いた色など、チェックボックス、値を、凡例タグのように、フィールドセット内にありますが、テキスト入力の境界内にタグとラベルがありません。前もって感謝します！

Answer 1

必要なのは以下のとおりです。必要に応じてCSSの値を変更することができます。また、ラベルのbackground-colorを/ htmlと同じ色に設定することも重要です。

.form-group{ 
 
    padding:10px; 
 
    border:2px solid; 
 
    margin:10px; 
 
} 
 
.form-group>label{ 
 
    position:absolute; 
 
    top:-1px; 
 
    left:20px; 
 
    background-color:white; 
 
} 
 

 
.form-group>input{ 
 
    border:none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form id="first_name"> 
 
    <div class="form-group"> 
 
     <label>First name</label> 
 
     <input type="text" class="form-control input-lg" /> 
 
    </div> 
 
</form>

・ホープ、このことができます:)。