テキストボックス/図形をHTMLのテキストボックス内に作成する方法

Question

その中に図形などがある入力テキストボックスを作成したいと考えています。

Click here for my desired output. :)

おかげで、

Answer 1

:beforeと:afterは、コンテナ内でレンダリングするのであなたが:after & :beforeを使用することはできませんと<input>が他の要素を含めることはできません。

あなたができる最善のは -

• は、容器包装の両方の入力&横に<span>を作成し、あなたの形状
• なります<span>タグを作成します。

• position: absolute;を使用して入力内に<span>を配置します。

  私はペンShown here

HTML

<div class="container"> 
    <input type="text" /> 
    <span></span> 
</div> 

CSS

.container { display: inline; position: relative;} 
input { width: 400px; } 
span { 
    background: green; 
    position: absolute; 
    right: 5px; 
    top: 4px; 
    width: 20px; 
    height: 10px; 
} 

を作成しました