title: How to remove borders around textbox when adding background imageI have
body: <p>I have a textbox of which by I removed the default borders using    <code>outline:none;</code>  However, when I add a background-image the border is shown and can't be removed!</p>
  
  <p>How do I get rid of this? Here is the box:</p>
  
  <pre><code>&lt;input type = "text" placeholder = "Username" class = "txt_input"&gt;
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>background: url('images/user-icon.png') left no-repeat;
  margin-bottom: 5px;
  box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
  font-family: 'ProximaNova-Bold';
  outline: none;
  width: 200px;
  height:30px;
  text-align: center;
  text-transform: capitalize;
  padding:15px;
  padding-left:21px;
  </code></pre>