Bagzli Bagzli - 2 years ago 122
HTML Question

Circle background on an input element

I am trying to figure out if this is even possible, from all my research it doesn't appear to be, but I wanted to be 100% sure.

I am trying to draw a circle inside an input element. The circle would be red colour and then when it passes validation it would turn to green. I can do this fairly easy using an image, but I am trying to see if I can avoid using images to do this.

I can easily draw circles with divs:

width: 200px;
height: 200px;
border-radius: 50%;
background: red;

but I don't know how to draw a circle on a background element. I was looking into maybe using before:after element but that doesn't seem possible.

Are there any ways of accomplishing this?

Answer Source

You could use pseudo-element and toggle color with JQuery on validation (i used focus for demo(

$('input').on('focus', function() {
$('input').on('blur', function() {
div {
  position: relative;
div:before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: blue;
  transform: translateY(-50%);
} {
  background: green;
<script src=""></script>
  <input type="text">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download