如何保留底部轮廓（焦点边框）？

Question

我希望去掉左、右和上的轮廓线，只保留底部轮廓线。

例如：

 input
_______

我知道我们可以使用以下方式删除所有轮廓线：

<input style="outline: none" >

有没有办法只保留底部的轮廓线？

- Amy

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

- Viira

---

为什么他们要把它搞得这么复杂，我的意思是为什么border-bottom不能在input-focus时与outline: none;一起使用。我只想在焦点状态下有线条。每次因为这些小事情浪费的时间都太可怕了。不管怎样，感谢您的帮助！;) - Shuryno

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

- Karar Barcha

Answer 3

Outline的CSS代码具有以下属性：

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

你不能只保留下边框而移除其他的（上、左和右）。你必须全部保留或全部移除。但是你可以使用边框代替，像这样：

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

- Abramo