Javascript 谷歌浏览器中与边界半径相关的问题

我有以下的css课程

form input[type="text"], form input[type="email"], form input[type="password"], form select, form textarea {
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    padding: 2px 0;
}

以及以下html和Java脚本：

<input type="text" id="txt1" style="width:300px;" />
    <input type="button" id="btn" value="click here" class="medium required" onclick="return validate();"/>

<script language="javascript">
    function validate()
    {
         if (document.getElementById('txt1').value == '') {

            document.getElementById('txt1').style.borderLeft = "5px solid red";

            return false;
        }


    }
</script>

函数验证（）
{
if（document.getElementById（'txt1'）。值=“”）{
document.getElementById（'txt1'）.style.borderLeft=“5px实心红色”；
返回false；
}
}

它可以在Mozila中工作，但在google Chrome中，只要验证触发inputbox，就会在javascript中非常有效地应用css，但它也会创建1px实体的上下边框

我如何解决这个问题？

---

谢谢。

如果我理解您的问题，顶部和底部边框也会变为红色（在Chrome中）。您提到它们是1px实心的，但这是您最初在css中设置它们的方式，所以我认为真正的问题不是有实心1px边框，而是它的颜色不对。因此，我假设它们从

#CCCCCC

变为

红色

，而您只希望左边框这样做

我怀疑

边界半径

（或事后渲染）可能是问题所在。如果您尝试不使用

边界半径

，问题是否仍然存在（我没有访问Chrome来测试自己）？如果这解决了问题，那就是问题所在。您可以尝试通过做一些更明确的事情来克服它：

function validate()
    {
         var el = document.getElementById('txt1');
         if (el.value == '') {
            el.style.borderLeft = "5px solid red";
            el.style.borderTopColor = "#CCCCCC";
            el.style.borderBottomColor = "#CCCCCC";

            return false;
        }
    }

编辑：根据UnLoCo的信息，无论是他在这里的第一条评论，还是他在您的问题中的评论，您可以尝试不使用速记css，看看这是否解决了问题。因此，您的css没有：

border: 1px solid #CCCCCC;

您可以在基本css中尝试这一点，看看当左侧边框发生更改时，显式设置每个边框是否允许Chrome不覆盖其他边框：

border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;

---

这是一个已知错误，已报告：

但是，您的案例有一个变通方法：

将半径从所有3px调整为3px/1px。虽然它并不完美，但在某种程度上是可以接受的

---

演示：

我认为这是chrome中带有

边框的一个bug:3px solid#cccc问题消失了，但这不好！！在最新版本的Chrome、Safari或Firefox for OSX中，我没有发现这个问题。谢谢你让我知道（因为我没有Chrome要测试）。你能告诉我，Chrome是否会使顶部/底部边框变红？如果
边界半径
未应用于输入，该效果会消失吗？是的，没有半径时效果会消失。这里有两个案例显示了这个bug。谢谢你的图片。这真的很奇怪，红色只出现在上/下边界的中间（我希望整个东西都是红色的，而不仅仅是一部分）。解决方案似乎是消除或更改图像中标注的边界半径或边界宽度。