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

【问题标题】：How to keep bottom outline (focus border) only?如何只保留底部轮廓（焦点边框）？
【发布时间】：2021-11-26 07:25:20
【问题描述】：

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

例如：

 input
_______

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

<input style="outline: none" >

有没有办法保持底部轮廓？提前致谢。

【问题讨论】：

html - Input text field with only bottom border - Stack Overflow

标签： html css

【解决方案1】：

你不能那样做。根据w3schools

轮廓与边框不同！与边框不同，绘制轮廓在元素的边界之外

它适用于整个元素。

也许你可以试试box-shadow

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

&lt;input type="text" placeholder="name"&gt;

【讨论】：

【解决方案2】：

您无法使用 outlines 做到这一点，但您可以使用 borders 做到这一点。

只需在 输入字段 中添加 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;
}

&lt;input type="text" placeholder="Enter your Name..."&gt;

【讨论】：

【解决方案3】：

大纲 CSS 代码具有以下属性：

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

您不能保留轮廓底部并删除其余部分（顶部、左侧和右侧）。您必须保留全部或全部删除。但你可以改用边框，像这样：

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

【讨论】：