title: Circle background on an input element
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>I can easily draw circles with divs:</p>
  
  <pre><code>&lt;div&gt;&lt;/div&gt;
  div{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: red;
  }
  </code></pre>
  
  <p>but I don't know how to draw a circle on a background element.  I was looking into maybe using <code>:before</code> or <code>:after</code> element but that doesn't seem possible.</p>
  
  <p>Are there any ways of accomplishing this?</p>