删除文本框的左边框会导致顶部和右侧边框出现阴影 [重复]答案

【问题标题】：Removing left border of a textbox causes shadow on top and right border [duplicate]删除文本框的左边框会导致顶部和右侧边框出现阴影 [重复]
【发布时间】：2015-12-14 21:26:41
【问题描述】：

我想合并两个文本框并将它们排成一行，使它们看起来是一个。目的是保持左侧框禁用，内容不变，右侧框可编辑。

这是我的 CSS：

.mergeInputLeft
{
    border-right-width: 0;
    float:left;
    background-color : white;
}

 .mergeInputRight
{
    border-left-width: 0;
    outline : none;
}

目的是服务。但是这些框看起来与表单上的其他框略有不同，因为它们现在在顶部和右/左边框上有一个微弱的内部阴影。而且看起来很奇怪。我已经检查了其他类似的问题，但大多数解决方案都是为了完全去除边框。

任何建议！

有一个类似的问题。然而，任何人都想知道这就是我所做的：

.mergeInputLeft
{
    border-right-width: 0;
    float:left;
    background-color : white;
    border-style: solid none solid solid;
    border-color:#999;
    border-width:1px;
}

 .mergeInputRight
{
    border-left-width: 0;
    border-style: solid solid solid none;
    border-color:#999;
    border-width:1px;
}

【问题讨论】：

您为底部、顶部和右侧提供了各种边框样式。会不会跟这个有关系？...
@GolezTrol 根据您的输入更新了我的问题和代码...结果相同，我仍然在上边框上看到那些阴影，而在下边框上看不到这些阴影。它在您的示例中也可见。如果你可以看看。
看来你是对的。好吧，至少那时我为你节省了大量的 CSS。 ;-) 边框似乎是由样式决定的，就好像对于“完整”边框，操作系统负责样式，而对于这些修改过的输入框，浏览器接管（反之亦然）。在不同的浏览器和不同的主机系统上，效果也可能不同。
@GolezTrol 谢谢，是的，这是重复的！！ ;)

标签： html css

【解决方案1】：

您只需要删除边框，例如将边框宽度设置为 0。在您的情况下，您将各种样式应用于其他边框，这可能会导致问题。这应该足够了：

.a {
  border-right-width: 0;
}
.b {
  border-left-width: 0;
}

&lt;input class="a" disabled value="Fixed text"&gt;&lt;input class="b"&gt;

【讨论】：