入力要素の円の背景

Question

私はこれが可能であるかどうかを調べようとしていますが、すべての私の研究からはそうは見えませんが、私は100％確信したかったのです。

入力要素内に円を描こうとしています。円は赤色になり、検証に合格すると緑色に変わります。私は画像を使ってこれをかなり簡単に行うことができますが、これを行うために画像を使用することを避けることができるかどうかを確認しようとしています。

私は簡単にdivタグで円を描くことができます。

<div></div> 
div{ 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    background: red; 
} 

が、私は、背景要素の上に円を描画する方法がわかりません。私はおそらく:beforeまたは:after要素を使用して調べていましたが、それは可能ではないようです。

これを達成する方法はありますか？

Answer 1

あなたは入力にするdiv相対を追加

$('input').on('focus', function() { 
 
    $(this).parent('div').addClass('active'); 
 
}); 
 
$('input').on('blur', function() { 
 
    $(this).parent('div').removeClass('active'); 
 
});

div { 
 
    position: relative; 
 
} 
 
div:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 5px; 
 
    top: 50%; 
 
    width: 10px; 
 
    height: 10px; 
 
    border-radius: 50%; 
 
    background: blue; 
 
    transform: translateY(-50%); 
 
} 
 
div.active:before { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="text"> 
 
</div>

Answer 2

radial-gradient以下のスニペットのように、これを実現できます。現代のブラウザだけをサポートしなければならない限り、余分な要素を追加する必要はありません。疑似コードは自己閉じタグであるため、input要素では機能しません。

Chrome（v51.0.2704.19 dev-m）、Firefox（v45.0.2）、Opera（v36）Edge、IE11、IE10で動作確認済みです。 This approach would not work in IE9 and lower because support for CSS gradients is not there in those browsers。

input { 
 
    background-image: radial-gradient(circle at center, red 4px, transparent 5px); 
 
    background-repeat: no-repeat; 
 
    background-size: 20px 100%; /* equal to the height */ 
 
    height: 20px; 
 
    padding-left: 20px; /* equal to background-size in X-axis */ 
 
} 
 
input:valid { 
 
    background-image: radial-gradient(circle at center, green 4px, transparent 5px); 
 
}

<input type='text' required/> 
 
<input type='text' value='Some text' required/>