Question

我试图弄清楚这是否有可能，从我所有的研究看来它似乎都没有，但我想100％肯定。

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

我可以轻松地用div绘制圆圈：

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

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

有没有办法实现这个目标？

Answer 1

您可以使用radial-gradient背景图片实现此功能，如下面的代码段所示。只要您只支持现代浏览器，就不需要添加额外的元素。 Pseudo将无法与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/>

Answer 2

您可以使用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>

输入元素

2 个答案: