如何为输入框设置每边的边框？答案

【问题标题】：How to set the border per side for an input box?如何为输入框设置每边的边框？
【发布时间】：2015-09-22 07:34:49
【问题描述】：

input-box 带有一个可以设置为0 的轮廓。然后它会在它周围显示一个丑陋的边框。

这个边框也可以设置为none，让输入框没有边框。

但是我想只在输入框的顶部和底部放置一个边框，但无法完成。有什么想法吗？

【问题讨论】：

【解决方案1】：

将此应用于您的输入元素

input {
    border: 1px solid #000; /* this will give the input 1px black border all around */
    border-left: 0 none;
    border-right: 0 none;
}

应该这样做。

或者，你可以去

input {
    border: 0; /* resets default border */
    border-top: [your border styling];
    border-bottom: [your border styling];
}

【讨论】：

【解决方案2】：

如果您想使用提供的边框，请执行此操作..

input {
  border-left:0px;
  border-right:0px;
}

如果你不想这样，那就使用..

input {
  border-top:1px solid red;
  border-bottom:1px solid red;
  border-left:0px;
  border-right:0px;
}

【讨论】：

【解决方案3】：

除了边框之外，浏览器还添加了一个outline。

你可以的

textarea:focus, input:focus{
    outline: 0;
}

甚至

*:focus {
    outline: 0;
}

禁用此行。

来源： https://stackoverflow.com/a/3397158/3510872

【讨论】：