输入元素上的圆形背景

Question

我想弄明白，如果这甚至可能，从我所有的研究中看来都不是，但我希望100％确定。

我想在输入元素内画一个圆。该圆圈将是红色，然后当它通过验证时，它会变成绿色。我可以使用图像很容易地做到这一点，但我试图看看是否可以避免使用图像来完成此操作。

我可以很容易地绘制圆用的div：

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

，但我不知道如何画一个圆圈背景元素上。我正在研究可能使用:before或:after元素，但这似乎不可能。

有没有办法完成这个？

Answer 1

你可以使用pseudo-element与JQuery上验证切换颜色（我用focus的演示（

$('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背景图像来实现此功能，如下面的代码片段所示。只要您只需支持现代浏览器，就不需要添加额外的元素。 Pseudo's不会与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/>