gssではなくcssのタイプテキストの入力内に「x」のクリア/解除ボタンを追加

Question

html5にタイプテキストの入力があり、プレースホルダとして「電子メール」があります。私はそれをクリックして入力を却下するために "x"を追加したいと思います。しかし、私は別の解決策を試みましたが、同じもののようには見えませんでした（私は検索の入力のタイプを変更したくありません）。入力：

.email-input { 
 
    display: inline-block; 
 
    height: 40px; 
 
    width: 400px; 
 
    font-size: 15px; 
 
    color: #666666; 
 
    text-indent: 8px; 
 
    border: 0px; 
 
    margin: 26px 0px 16px 0px; 
 
}

<input id="try-different-email" type="text" name="email" placeholder="Email" class="email-input" />

これは、私が「×」ボタンを閉じ、のように見える誰もが（特にCSSの一部）それで私を助けてくださいことができますをご希望の方法ですか？

Answer 1

あなたは、このような何かを行うクラスでのx（×エンティティ）と一緒にdivの中にテキストフィールドを配置し、フィールドを削除するには、その近くのxを実行するためにあなたのjQueryを書くことができ：

.email-input { 
 
    display: inline-block; 
 
    height: 40px; 
 
    width: 100%; 
 
    font-size: 15px; 
 
    color: #666666; 
 
    text-indent: 8px; 
 
    border: 1px solid #2d2d2d; 
 
} 
 

 
.text-field-position { 
 
position: relative; 
 
} 
 

 
.text-field-position span { 
 
position: absolute; 
 
right: 1em; 
 
top: 0; 
 
bottom: 0; 
 
line-height: 40px; 
 
}

<div class="text-field-position"> 
 
<input id="try-different-email" type="text" name="email" placeholder="Email" class="email-input"><span class="removeClick">&times;</span></div>