問題谷歌瀏覽器相關的邊界半徑

Question

我已經follwing 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但在谷歌瀏覽器，只要確認火災輸入框獲取CSS在javascript中的應用，但它也創建1px固體的頂部和底部邊框

我該如何解決這個問題？ 謝謝。

Answer 1

如果我瞭解您的問題，頂部和底部邊框也會變成紅色（在Chrome中）。你提到他們是1px固體，但這是你最初設置他們在你的CSS，所以我認爲真正的問題不是有一個堅實的1px邊框，但它是錯誤的顏色。所以我假設你只需要左邊框就可以從#CCCCCC更改爲red。

我懷疑border-radius（或事後的呈現）可能是問題。如果您嘗試使用否border-radius是否仍然存在問題（我無法訪問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; 

Answer 2

這是一個已知的錯誤，並已報告：https://bugs.webkit.org/show_bug.cgi?id=72120。

然而，這裏是你的一種替代方法：

扭捏所有的3px到的3px/1px的半徑。雖然它不完美，但可以接受。

演示：http://jsfiddle.net/linmic/VFBT3/51/