Проблема, связанная с Google Chrome для Border-Radius

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 solid

, вы можете проверить этот пример на: http://jsfiddle.net/unloco/VFBT3/3/

Как я могу решить эту проблему?Спасибо.

Answer 1

Да, похоже, вы поймали какую-то ошибку. Но вы также можете сделать это следующим образом: 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 будет таким же.

Answer 2

Кажется, что это ошибка с border-radius: 3px 3px 3px 3px; и -webkit-border-radius: 3px 3px 3px 3px; Если вы удалите это из CSS, то проблема с Chrome

не возникает

ср - http://jsfiddle.net/VFBT3/20/