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

Question

我希望有人可以帮我回答这个问题，因为谷歌搜索的时间并不充实。我目前有这个代码样式我的表单标签：

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

我想将相同的border-top属性设置为输入，textarea和select标签。但是，这些元素上的样式边框顶部显示了明显的元素本身边框。我想知道是否有可能在外面显示边框，或者我是否需要使用其他属性来实现我想要的结果。

Answer 1

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

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

如果你的字面意思是OUTSIDE，那么你可以使用阴影来欺骗

Demo

CSS

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

Answer 2

如果你想在元素之外有一个边框，你需要围绕每个input，textarea或select的一个块元素（如果没有，可能div元素在语义上是相关的）。这些块将接收边框，您可以使用padding-top

上的div调整表单元素与边框之间的距离

这样做的另一个好处是，border上的div支持比表单元素上的border更好。