输入元素上的圆形背景

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/>

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>

输入元素上的圆形背景

Circle background on an input element

html

css

css-shapes