title: How can I remove the black outline around my input areas?
body: <p>So I have these black boxes go round the input area on the form I am building. Is there a way I can remove this, I am also using bootstrap not sure if that is affecting it but if there is any ideas. Greatly appreciated! <a href="https://i.stack.imgur.com/XSLLX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XSLLX.png" alt="Input area with black box" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.form-input-styling {
    border-radius: 0 2em;
    padding: 0 10px;
    width: 50%;
    border: none;
    line-height: 2em;
    margin-bottom: 20px;
    background-color: #f25b43;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="row"&gt;
              &lt;div class="col-12"&gt;&lt;input class="form-input form-input-styling" type="text" id="fname" name="fname" required placeholder="Name"&gt;&lt;/div&gt;
              &lt;div class="col-12"&gt;&lt;input class="form-input form-input-styling" type="email" id="email" name="email" required placeholder="Email"&gt;&lt;/div&gt;
              &lt;div class="col-12"&gt;&lt;input class="form-input form-input-styling" type="tel" id="phone_num" name="phone_num" placeholder="Phone Number"&gt;&lt;/div&gt;
              &lt;div class="col-12"&gt;&lt;textarea id="text-area" name="textarea" rows="4" cols="50" placeholder="Enter Your Message Here"&gt;&lt;/textarea&gt;&lt;/div&gt;
              &lt;div class="col-12"&gt;&lt;input type="submit" value="Submit"&gt;&lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>