html - 输入元素上的圆形背景

Question

我想弄清楚这是否可能，从我所有的研究来看它似乎不是，但我想 100% 确定。

我正在尝试在输入元素内绘制一个圆圈。圆圈是红色的，然后当它通过验证时它会变成绿色。我可以使用图像相当轻松地完成此操作，但我正在尝试看看是否可以避免使用图像来执行此操作。

我可以很容易地用 div 画圆圈:

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

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

有什么方法可以实现吗？

Answer 1

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