如何只保持底部轮廓(焦点边界)?

Question

我想删除左，右和上轮廓，只留下底部轮廓。

例如:

input
_______

我知道我们可以用这种方式删除所有的轮廓线:

<input style="outline: none" >

是否有办法保持底部轮廓?

Answer 1

你不能那样做。根据w3schools

轮廓与边框不同!与边框不同，轮廓是绘制的元素边框外

适用于整个元素。

你可以试试box-shadow

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

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

Answer 2

你不能使用轮廓，但是你可以使用边框．

添加border-bottom在输入字段改变边框颜色在和

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

Answer 3

Outline CSS代码有以下属性:

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

你不能只保留轮廓线的底部而删除其余部分(顶部，左侧和右侧)，你必须保留全部或删除全部。但是你可以用border代替，像这样:

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