如何刪除Firefox中選擇框的虛線邊框

當我選擇Firefox中的選擇框時，我得到一個虛線邊框。我怎樣才能刪除它？看到圖片。如何刪除Firefox中選擇框的虛線邊框

enter image description here

select.register { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    text-indent: 0.01px; 
    text-overflow: ''; 
    appearance: none; 
    font-size:14px; 
    display: inline-block; 
    height: 30px; 
    margin: 0; 
    padding: 5px 8px; 
    background: #fff; 
    border: 1px solid #d9d9d9; 
    border-top: 1px solid #c0c0c0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-border-radius: 1px; 
    -moz-border-radius: 1px; 
    border-radius: 1px; 
} 

select.register:focus{ 
    outline: none; 
    border: 1px solid #ff00ff; 
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); 
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); 
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); 
}

來源

2013-10-19 Pavel

添加以下你的CSS，它應該修復它。

select:-moz-focusring { 
    color: transparent; 
    text-shadow: 0 0 0 #000; 
}

Demo Fiddle

來源

2013-10-19 17:01:24 Harry

這是有效的。但這是一個奇怪的行爲。 – idmean

@wumm：Yup mate，一些瀏覽器的具體實現:( – Harry

當構建一個可重用的組件時，這不起作用 - 你不能知道那裏的文本顏色，它必須被繼承，並且因爲你正在設置'color' ，'currentColor'屬性不能使用 – Thany

做這樣的事情：

button::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner { 
    border: none; 
}

你必須使用這個僞選擇::-moz-focus-inner因爲這個邊界Firefoxs 「內聚焦式」。

（代碼：http://snipplr.com/view/16931）

來源

2013-10-19 16:40:42 idmean

如何風格選擇框？我不能讓它工作？我發佈了我的代碼。 – Pavel

你的文本字段現在看起來「正確」嗎？ – idmean

這是一個選擇框。這不起作用。 – Pavel

如何刪除Firefox中選擇框的虛線邊框

回答

相關問題