Question

我有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 Script：

<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>

它可以在Mozila中运行，但在google Chrome中，只要验证触发输入框获得css在javascript中应用，但它也会创建1px实体的顶部和底部边框

您可以在http://jsfiddle.net/unloco/VFBT3/3/

上查看此示例

我该如何解决这个问题？感谢。

Answer 1

似乎是border-radius: 3px 3px 3px 3px;和-webkit-border-radius: 3px 3px 3px 3px;的错误如果您从CSS中移除它，那么Chrome就没有问题

cf - http://jsfiddle.net/VFBT3/20/

Answer 2

是的，你似乎抓到了一些bug。但是你也可以这样做： http://jsfiddle.net/VFBT3/46/

CSS

form input[type="text"], form input[type="email"], form input[type="password"], form       select, form textarea {border: none;height: 20px;vertical-align: top;}
    div{width: 305px;height: 20px;border: 1px solid #CCC;
    border-radius: 3px;}
    *{margin:0;padding:0;}

HTML：

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

</form>

JS将是相同的。

与谷歌Chrome for Border-Radius相关的问题

2 个答案: