-1

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>
Bumhan Yu
  • 2,078
  • 1
  • 10
  • 20
Firas Attieh
  • 27
  • 5

1 Answers1

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>
Burham B. Soliman
  • 1,380
  • 1
  • 9
  • 13
  • Thanks, that worked, learnt a new property today aswell. Much appreciated! – Firas Attieh Jan 24 '23 at 17:23
  • Please note that there are some accessibility concerns regarding the outline property set to none: https://ux.stackexchange.com/questions/79126/accessibility-concerns-with-outlinenone – Célia Jan 24 '23 at 17:24
  • Be warned, however, that `:focus` state indicator is a [critical accessibility element](https://cdn.dribbble.com/users/22976/screenshots/14164967/media/8c4295e930088f7eb64c7e00af411d85.png?compress=1) that shows the users whether a given input field is in focus. If you remove the `outline`, you'd need to provide a custom `:focus` style. – Bumhan Yu Jan 24 '23 at 17:26