仅删除输入元素上的一个边框，而不影响其他边框答案

【问题标题】：Remove only one border on input element and not effect the other borders仅删除输入元素上的一个边框，而不影响其他边框
【发布时间】：2013-09-27 12:25:03
【问题描述】：

我对下面脚本（也位于http://jsbin.com/enOxEya/1/）的意图只是删除右边框。

但是，对于 FF、Chrome 和 IE，它会使左上边框和上边框变为粗体。

此外，对于 FF，它会移除底部边框，对于 Chrome 和 IE，它会隐藏底部边框。

查看每个浏览器的图像（所有浏览器都是最新的）

FF 的结果

Chrome 的结果

来自 IE 的结果

仅对顶部、底部和左侧边框使用无边框样式也会对所有浏览器产生意外结果。

如何在不影响其他三个边框的情况下仅删除单个边框（即右侧边框）？

<!DOCTYPE html>
<html>
    <head>
        <title>Boarders</title>
        <style type='text/css'>
            #input2 {border-right-style:none}
        </style>
    </head>
    <body>
        <input id="input1" />
        <br />
        <br />
        <input id="input2" />
    </body>
</html>

【问题讨论】：

你在 chrome 中看起来不错
@ExplosionPills。除了右边框外，两个输入看起来是否相同？我编辑了我的原始帖子以显示我所看到的图像。
如果我理解正确，你为什么不输入这样的东西 -> jsfiddle.net/sLAbb
感谢 Szymon、Mohsen 和 Sid。看起来您的所有答案都要求将样式主动放置在剩余的 (3) 边框上。是否无法将它们保留为默认浏览器值？
我不这么认为。但无论如何，它的 1 行代码要做:)。干杯

标签： html css border

【解决方案1】：

试试这个，效果很好

只是替换

<style type='text/css'>
            #input2 {border-right-style:none}
        </style>

有了这个

<style type='text/css'>
            #input2 {border-style: solid none solid solid}
        </style>

希望这对你有帮助。

【讨论】：

【解决方案2】：

试试这个：

DEMO

<!DOCTYPE html>
<html>
<head>
<title>Boarders</title>
<style type='text/css'>
#input2 {
    border: 1px solid #ABADB3;
    border-right: 0;
}
</style>
</head>
<body>
<input id="input1" />
<br />
<br />
<input id="input2" />
</body>
</html>

【讨论】：

我认为这是一个很好的答案，但相信 Sid 的要好一些。