在表单输入上设置外部边框样式答案

【问题标题】：Styling an exterior border on form inputs在表单输入上设置外部边框样式
【发布时间】：2013-04-16 20:32:37
【问题描述】：

我希望有人可以帮助我回答这个问题，因为数小时的谷歌搜索并没有结果。我目前有这个代码样式我的表单标签：

label {
    display:inline-block;
    height: 15px;
    width: 350px;
    float: left;
    padding: 5px;
    border-top: 1px solid black;
    color: black;
    font-size: 12px;
}

我想为我的输入、文本区域和选择标签设置相同的边框顶部属性。但是，在这些元素上设置border-top 样式会明显地设置元素本身周围的边框。我想知道是否可以在外面显示边框，或者我是否需要使用其他属性来达到我想要的结果。

【问题讨论】：

@Adrift 你不能在一侧有轮廓
我已经看过大纲了，它似乎没有回答我的问题。
你尝试过：之前吗？
我不确定我是否理解您想要实现的目标。这就是你要找的jsfiddle.net/8wmDs 吗？我已经使用border: 0 none 重置了边框，然后使用border-top: 1px solid black 仅对这些元素应用了顶部边框。
@tw16 这不是我想要达到的效果...样式标签在距离文本 5px 的宽度处显示一个边框顶部。我希望这种边框顶部样式继续到我的输入元素上，而不必将所有内容包装在包含 div 中（因为这将意味着数小时的重复编码）。表单的标签和输入元素水平并排显示。 TiagoCésarOliveira - 不，我以前没试过，我对 CSS3 不太了解。

标签： css

【解决方案1】：

如果你想在元素之外有一个边框，你需要在每个input、textarea 或select 周围有一个块元素（如果没有元素在语义上相关，则可能是div）。这些块将接收边框，您可以在divpadding-top 上调整表单元素与边框之间的距离

这还有一个优点，即div 上的border 比表单元素上的border 得到更好的支持。

【讨论】：

【解决方案2】：

如果你的意思是边框看起来比你需要的简单

input {
   border: 0;
   border-top: 1px solid #333;
}

如果你的字面意思是外面，那么你可以使用影子之类的东西来欺骗

Demo

CSS

input {
    box-shadow: 0px -1px 1px -1px #333;
    border: none;
    margin: 50px;
}

【讨论】：