通貨 "$"入力の追加方法

Question

"$"のような通貨、またはユーザーが入力して絶対的にとどまることができるテキストを作る方法を教えてください。

しかし、私はそれが材料設計Liteの

<!-- Textfield with Floating Label --> 

<form action="#"> 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
    <input class="mdl-textfield__input" type="text" id="sample3"> 
    <label class="mdl-textfield__label" for="sample3">Text...</label> 
    </div> 
</form> 

Answer 1

はあなたが::after

label::after { 
 
    content: ' $' 
 
}

<form action="#"> 
 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
 
    <input class="mdl-textfield__input" type="text" id="sample3"> 
 
    <label class="mdl-textfield__label" for="sample3">Text...</label> 
 
    </div> 
 
</form>

または::before

のように、擬似要素を使用することはできませんに確認する必要があり忘れてはいけません

の

label::before { 
 
    content: '$ ' 
 
}

<form action="#"> 
 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
 
    <input class="mdl-textfield__input" type="text" id="sample3"> 
 
    <label class="mdl-textfield__label" for="sample3">Text...</label> 
 
    </div> 
 
</form>