入力フィールド内にアスタリスクが必要

Question

入力フィールドの右端に赤いアスタリスクを置くことは可能ですか？私はアスタリスクを置くために私のフォームに余裕がありません、もし私がそれらを置く場合、それは奇妙に見えます。ここに私の入力のための私のCSSです。

input { 
    padding: 15px; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    margin-bottom: 10px; 
    box-sizing: border-box; 
    font-family: montserrat; 
    color: #2C3E50; 
    font-size: 13px; 
} 

これを達成する方法はありますか？ありがとう。

Answer 1

ブートストラップを使うと、あなたが話していることをする "input-group-addon"というクラスがあります。ブートストラップを使用していない場合、おそらくあなたのプロジェクトのためにあなたが想像しているように見える場合は、そのクラスのCSSを借りることができます。ここにはその例があります：http://getbootstrap.com/css/#forms

Answer 2

入力コントロールの前または後には使用できません。最終的な結果を達成するためにINORDERだから、あなたは、「*」

#wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
    z-index: 1; 
 
} 
 
#wrapper input { 
 
    padding-right: 14px; 
 
} 
 
#wrapper:after { 
 
    content: "*"; 
 
    position: absolute; 
 
    right: 5px; 
 
    top: +3px; 
 
    color: red; 
 
    z-index: 5; 
 
}

<div id="wrapper"> 
 
    <input type="text" /> 
 
</div>

Answer 3

を配置する「後」のdivと入力コントロールをラップ（それインラインブロックにする）とCSSを使用する必要がありますあなたはGlyphiconsとともにbootsrap3使用している場合、あなたはこれを試すことができます。

.requiredFieldWrapper::after 
 
{ 
 
    font-family: 'Glyphicons Halflings'; 
 
    content: '*'; 
 
    position: absolute; 
 
    top:2px; 
 
    bottom: 0; 
 
    right: 17px; 
 
    font-size: 10px; 
 
    color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<br> 
 
<br> 
 
<div class="col-xs-10 requiredFieldWrapper"> 
 
<input class="form-control" type="text" autocomplete="off" required> 
 
</div>