问题涉及到谷歌Chrome浏览器的边界半径

我已经follwing CSS类问题涉及到谷歌Chrome浏览器的边界半径

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但在谷歌浏览器，只要确认火灾输入框获取css在javascript中的应用，但它也创建1px固体的顶部和底部边框

你可以检查这个例子：http://jsfiddle.net/unloco/VFBT3/3/

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

来源

2012-01-04 ghanshyam.mirani

这很奇怪。最小的例子：http://jsfiddle.net/VFBT3/13/另一个更小的：http://jsfiddle.net/VFBT3/14/ – 2012-01-04 06:49:03

很奇怪 - 你已经发现了一个bug。你可以通过改变输入的宽度或边框宽度来让它消失（例如，尝试“8px纯红”而不是5）。 – 2012-01-04 07:44:31

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

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

来源

2012-01-04 07:17:27

呀，看来你已经赶上了一些bug.But你也可以做这件事情是这样的： 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会一样。

来源

2012-01-04 09:22:49 Gurvinder

问题涉及到谷歌Chrome浏览器的边界半径

回答

相关问题