2016-12-26 20 views
1

我有許多輸入類型的文本,我已經放置了邊框和邊框顏色。它們在Chrome中表現良好,但在Safari中,邊界是我在兩側選擇的顏色,而在另一側則是藍色。我在同一頁面中有一個文本框的邊框沒有問題。但提交按鈕也沒有正確的邊框顏色。用於文本輸入的Safari邊框顏色

enter image description here

HTML:

<label for="email">Email address</label> 
<input type="text" id="email" name="email" /> 

<label for="telephone">Phone number</label> 
<input type="text" id="telephone" name="telephone" /> 

<label for="notes">Notes</label> 
<textarea type="textarea" id="notes" name="notes" /></textarea> 

<input type="submit" id="submit" value="Send" /> 

CSS:

input, textarea, { 
    display: block; 
    width: 200px; 
    height: 20px; 
    margin: 0 !important; 
    margin-bottom: 10px !important; 
    padding: 0 !important; 
    padding: 4px 8px !important; 
    font-size: 16px; 
    background-color: lightgrey; 
    border-width: 2px !important; 
    border-radius: 4px; 
    border-color: #001b43; 
    outline: none; 
} 

搜索的時候,我已經找到了一些相關的問題和解決方案,並已嘗試過,但沒有快樂。例如:

input.text, 
input[type=text], 
input[type=email], 
input[type=tel], 
input[type=url], 
input[type=search] { 
    appearance: none; 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    border-radius: 0; 
    -moz-border-radius: 0; 
    -webkit-border-radius: 0; 
} 

回答

1

我把我的問題傳給了朋友。他很快就明白了。解決方案是:

border-style: solid; 
+1

5年的UI開發人員,我仍然沒有意識到有默認值設置每個瀏覽器這個。永遠不要以爲邊界會像'outset'或'inset'那樣。好找! –