Borderless text input in html and css

Question

I'm trying to make borderless text inputs in HTML and CSS, and I've succeeded in doing so, however whenever I click on the input field, it comes up with a new yellow border in place of the border I got rid of. I'm assuming this is in the default stylesheets but i can't seem to be able to override it.

div.field input {
  width: 65%;
  height: 30px;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

<div class="field">
  <input type="text" placeholder="Username" name="user">
</div>

Answer 1

just set css outline property to none,

like so

div.field input {
    width: 65%;
    height: 30px;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    outline:none;
}

<div class="field">
   <input type="text" placeholder="Username" name="user">
</div>