设置border-top-width：0px; on输入更改整个边框外观

Question

我想在彼此之下显示两个输入字段，没有边距，没有填充，也没有双边框（所以它看起来像一个普通的表，只有一个分隔 每个领域之间的界限。）

删除边距很简单（margin-top: 0px; margin-bottom: 0px;），但当我尝试使用border-top-width: 0px;删除顶部边框时，输入边框的整个外观变为浅灰色，尺寸也变大。这种效果发生在所有浏览器中。

这是一个例子： HTML

<div class="test">
    <input type="text" value="Test" />
    <br />
    <input type="text" value="Test" />
</div>

CSS：

input {
    margin-top: 0px;
    margin-bottom: 0px;
}
.test input {
    border-top-width: 0px;
}
.test input:first-child {
    border-top-width: 2px;
}

Fiddler：http://fiddle.jshell.net/32een/1/

图片解释我想要的东西：

Answer 1

试试这个：

.test input {
    border-top: 0;
}
.test input:first-child {
    border-top: 2px solid #ccc;
}

另外，在您的代码中，您可以将“0px”替换为“0”，以进行优化。

Answer 2

如果你对表格没问题......

<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
    <tr>
        <td style="border:1px solid red;"><input type="text" value="" style="border: 0; width: 100%;" /><br /></td>
    </tr>
    <tr>
        <td style="border:1px solid red;"><input type="text" value="" style="border: 0; width: 100%;" /></td>
    </tr>
</table>

这是效果

Answer 3

重新定义浏览器边框样式：

input {
    margin-top: 0px;
    margin-bottom: 0px;
    outline: 0;
    padding: 0;
    border: 1px solid #cccccc;
}

UPD：并删除'px'表示零值。

Answer 4

当您开始设置输入元素的样式时会发生什么。

浏览器通常有两个输入默认值。一个现代的外观，有薄的边框（有时还有发光效果），如果你根本不用它们就会使用它们，还有一个看起来很古老的边框，当你触摸这个样式时会用作默认的边框。

因此，如果要设置边框样式，则必须指定包括样式，宽度和颜色在内的完整样式，以获得所需的外观。

类似的东西：

.test input {
  border: 1px solid #ccc;
  border-top-width: 0;
}
.test input:first-child {
  border-top-width: 1px;
}

Answer 5

您应该尝试使用内容可编辑的div。这样您就可以根据需要设置输入样式。我在你的jsfiddle中做了以下工作，但它确实有效。

HTML：

<div class="test">
    <div class="input" contenteditable="true">Test</div>
    <div class="input" contenteditable="true">Test</div>
</div>

CSS：

.input {
    display: block;
    border: 1px solid #000;
    width: 100px;
    margin-bottom: -1px;
}

这给出了你想要的外观