ドル記号をテキスト入力内に置く

Question

ドル記号をテキストボックスの先頭に入れておきたい。私は以下のコードを使用してこれを達成することができます。

これはchromeとIEで動作します。ドル記号は、firefoxのラベルの隣にあります。この問題をどのように解決すればよいですか？また、ドル記号をテキストとインラインで整列させるために、上の2pxを使用します。 CSSコードを改善する方法はありますか？

.input-symbol-dollar:after { 
 
    color: #37424a !important; 
 
    content: "$"; 
 
    font-size: 16px !important; 
 
    font-weight: 400; 
 
    left: 10px; 
 
    position: absolute; 
 
    top: 2px; 
 
} 
 

 
.input-symbol-dollar { 
 
    position: relative; 
 
} 
 

 
.abc-input { 
 
    border: 2px solid #c9c9c9; 
 
    box-shadow: none; 
 
    color: #6b6f72; 
 
    font-size: 0.9375rem; 
 
    text-transform: none; 
 
    width: 100%; 
 
    color: #37424a !important; 
 
    font-family: "Roboto Regular", sans-serif; 
 
    font-size: 16px !important; 
 
    font-weight: 400; 
 
    height: 42px !important; 
 
    padding-left: 17px !important; 
 
    display: inline-block !important; 
 
} 
 

 
label { 
 
    color: #37424a; 
 
    display: inline-block; 
 
    font-family: "Roboto Bold", sans-serif; 
 
    font-size: 15px; 
 
    font-weight: 700; 
 
    margin-bottom: 8px; 
 
}

<label for="abcInput" class="abc-label">lable filed </label> 
 
<span class="input-symbol-dollar"> 
 
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.00"></span>

https://jsfiddle.net/8jdek3zt/5/

Answer 1

これが起こっている理由はあるので、それはポジショニングはあなたがそれを可能に期待しているように計算されていないのです。最も簡単な解決策は、<span class="input-symbol-dollar">を

に設定することです。これをよりきれいな方法で配置するには、シンボルの表示ブロックを100％の高さで入力し、行の高さを等しく設定することも検討できます入力の高さに合わせます。私はあなたのフィドルを更新したが、関連するコードは以下の通りです：

https://jsfiddle.net/chzk1qgm/1/

.input-symbol-dollar { 
    position: relative; 
    display: block; 
} 
.input-symbol-dollar:after { 
    color: #37424a !important; 
    content: "$"; 
    font-size: 16px !important; 
    font-weight: 400; 
    position: absolute; 

    display: block; 
    height: 100%; 
    top: 0; 
    left: 10px; 
    line-height: 46px; // height of input + 4px for input border 
} 

代わりにdiv要素は、デフォルトではブロックレベル要素であるとして、あなたは、divにちょうど変更spanできました。残りのスタイルは同じままです。

Answer 2

のdivにスパンを入れてみてください。 spanはインライン要素なので

<label for="abcInput" class="abc-label">lable filed </label> 
<div> 
    <span class="input-symbol-dollar"> 
     <input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.000"> 
    </span> 
</div> 

Answer 3

.custom-text{ 
 
border: 2px solid #DDD; 
 
width: 100%; 
 
padding: 5px; 
 
}

<div class="custom-text"> 
 
    <span>$</span> 
 
    <input style="border: none;"/> 
 
</div>

Answer 4

不要なコードの多くは、あなたの例でありますように見えます。

ここでは、Chrome、Firefox、およびIE（Safariでテストされていない）で動作する簡易版を示します。

span { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
input { 
 
    border: 2px solid #c9c9c9; 
 
    box-shadow: none; 
 
    font-family: "Roboto Regular", sans-serif; 
 
    font-size: 1.5em; 
 
    height: 42px; 
 
    padding-left: 20px; 
 
} 
 

 
span::before { 
 
    content: "$"; 
 
    font-family: "Roboto Regular", sans-serif; 
 
    font-size: 1.5em; 
 
    position: absolute; 
 
    left: 5px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<span> 
 
<input placeholder="0.00"> 
 
</span>

ここで擬似要素の垂直方向のセンタリング方法の説明です：

• Element will not stay centered, especially when re-sizing screen