刪除文本框的左側邊框導致頂部和右側邊框上的陰影

-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

刪除文本框的左側邊框導致頂部和右側邊框上的陰影

回答

相關問題