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? Thanks in advance.

CodePudding user response：

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">

CodePudding user response：

the Outline CSS code has the following properties:

outline-style
outline-color
outline-width
outline-offset
outline

you can't keep the outline bottom and remove the remaining (top, left and right.) you have to keep all or remove all. but you can use border instead, like this:

.class-name {border-bottom: solid 2px white;}

CodePudding user response：

If you really want to do this, use clip-path.

<input type="text" style="clip-path: polygon(2% 5%, 98% 5%, 98% 120%, 2% 120%);" placeholder="Type Here">

CodePudding user response：

You can't do that using outlines, but you can do it using borders.

just Add border-bottom in input field and changed border color on Hover and Focus

input{
/* Extra css */
height: 42px;
padding: 6px 12px;
background-color: #eee;
border-radius: 0px;

/* Actual css */
border: 0px;
outline: 0px;
border-bottom: 2px blue solid;
}

/* CSS for Hover */
input:hover{
border-bottom: 2px red solid;
}

/* CSS for Focus */ 
input:focus{
border-bottom: 2px green solid;
}

<input type="text" placeholder="Enter your Name...">