Bagzli Bagzli - 7 months ago 22
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:

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

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

$('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>

Comments