How to keep bottom outline (focus border) only? [duplicate]

Question

I'd like to remove left, right and up outlines, leaving only the bottom outline.

for example:

 input
_______

I know we can remove ALL outlines using this way:

<input style="outline: none" >

Is there any way to keep the bottom outline?

Answer 1

You can't do that. According to w3schools

Outlines differ from borders! Unlike border, the outline is drawn outside the element's border

It applies to the whole element.

You could try box-shadow perhaps

input {outline: none; border:none; border-bottom: 1px solid orange;}
input:focus{box-shadow: 0 1px 0 0 blue;}

<input type="text" placeholder="name">