title: Creating legend around html INPUT box, not fieldset
body: <p>I would like to create a legend directly on a normal html input box. When you create a normal input with type text for example, html automatically creates a box with a border for this input. If I add a fieldset and legend tag to this input field, another box is create around it. I would like my legend to look like the attached picture <a href="https://i.stack.imgur.com/96JNj.png" rel="nofollow noreferrer">image attached below</a> from the site <a href="https://jiji.com.gh/registration.html" rel="nofollow noreferrer">https://jiji.com.gh/registration.html</a>. </p>
  
  <p>I tried to do this by removing the border around the input field using css like so:</p>
  
  <pre><code>.signup-form input  {
  border: 0px;
  </code></pre>
  
  <p>}</p>
  
  <p>and HTML:</p>
  
  <pre><code>&lt;form class=signup-form&gt;
  &lt;fieldset&gt;
  &lt;legend&gt;Enter email&lt;/legend&gt;
  &lt;input type="email" name="emailaddress"&gt;
  &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>But this creates a much bigger box than I would like, although it actually produces what I'm trying to do. Any better ideas on how I can do this to have a neat form with legend like used on the site I mentioned?</p>