删除文本框的左侧边框导致顶部和右侧边框上的阴影

-3

我想合并两个文本框并将它们排成一列，以便它们看起来一样。目的是保持左框禁用恒定内容，右框可编辑。删除文本框的左侧边框导致顶部和右侧边框上的阴影

这是我的CSS：

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

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

的puspose供应。但是这些盒子与表格上的其他盒子略有不同，因为它们现在在顶部和右侧/左侧边界上都有微弱的内部阴影。它看起来很奇怪。我查了其他类似的问题，但大多数解决方案都是为了彻底删除边框。

任何建议！

还有一个类似的问题。但是有人想知道这是我做过什么：

.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; 
}

来源

2015-12-14 swap000

你给各类边境造型的底部，顶部和右侧。这与它有什么关系？... – GolezTrol

@GolezTrol根据你的输入更新了我的问题和代码...结果是一样的，我仍然得到上边框上的那些阴影，这些阴影在下边框上看不到。在你的例子中也是可见的。如果你可以看看。 – swap000

看来你是对的。那么，至少我救了你很多CSS的地狱。 ;-)边框看起来是由于样式造成的，就好像是“完整”边框一样，操作系统负责样式，而对于这些修改过的输入框，浏览器接管（反之亦然）。在不同的浏览器和不同的主机系统上，效果可能也不同。 – GolezTrol

你只需要通过设置边框宽度为0。在你的情况下，除去边框，例如，应用各种造型的其他边界，这可能是造成这个问题的原因。这应该是足够了：

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

<input class="a" disabled value="Fixed text"><input class="b">

来源

2015-12-14 12:24:54 GolezTrol

删除文本框的左侧边框导致顶部和右侧边框上的阴影

回答

相关问题