设置border-top-width: 0px； on Input 改变整个边框的外观答案

【问题标题】：Setting border-top-width: 0px; on Input changes whole border appearance设置border-top-width: 0px； on Input 改变整个边框的外观
【发布时间】：2013-02-20 16:56:11
【问题描述】：

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

删除边距很容易（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;
}

提琴手：http://fiddle.jshell.net/32een/1/

解释我想要什么的图片：

【问题讨论】：

标签： html css

【解决方案1】：

试试这个：

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

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

【讨论】：

让我更好地解释一下：浏览器通常有一个对象的“默认”边框。当你想要没有边框时，你应该设置边框：0。当您想设置另一个细节时，浏览器将不再呈现默认边框（这就是它们变得更大和灰色的原因） - 然后，您必须提供边框类型、线条和颜色，以便浏览器可以处理您想要的边框方式。跨度>
一个值得信赖的来源，可以帮助我完成之前的评论 - 摘自 w3c：Note: Always declare the border-style property before the border-top-width property. An element must have borders before you can change the width.w3schools.com/cssref/pr_border-top_width.asp
谢谢，这解决了我的问题。以下是 Fiddler 示例的更新：fiddle.jshell.net/tJQpv CSS: .test { margin: 5px; } 输入 { 边距顶部：0；边距底部：0； } .test 输入 { 边框：1px inset #ccc;边框顶部宽度：0； } .test input:first-child {border-top: 1px inset #ccc; }

【解决方案2】：

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

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

UPD: 并删除零值的“px”。

【讨论】：

【解决方案3】：

当您开始设置输入元素的样式时会发生这种情况。

浏览器通常有两个默认的输入。一种带有细边框（有时是发光效果）的现代外观，如果您根本不对其进行样式设置，则使用这种外观，另一种带有粗边框的古代外观，当您触摸样式时将其用作默认设置。

所以，如果你想给边框设置样式，你必须指定一个完整的样式，包括样式、宽度和颜色，以获得你想要的外观。

类似：

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

【讨论】：

【解决方案4】：

如果你对桌子没问题...

<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>

效果如下

【讨论】：

【解决方案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;
}

这会给你想要的外观

【讨论】：