如何刪除在Chrome

提起我要添加藍色陰影突出顯示文本輸入時接收焦點輸入的3D邊界：如何刪除在Chrome

input:focus { 
    box-shadow:0px 0px 5px #6192D1; 
    -webkit-box-shadow: 0px 0px 5px #6192D1; 
    -moz-box-shadow: 0px 0px 5px #6192D1;  
    outline: 0; 
}

在Firefox看起來很好，但丁目增加了一些內部三維期待邊界。

JSFiddle

Chrome瀏覽器添加以下樣式：

border-top-style: inset; 
border-top-width: 2px; 
border-bottom-style: inset; 
border-bottom-width: 2px; 
border-left-style: inset; 
border-left-width: 2px; 
border-right-style: inset; 
border-right-width: 2px;

如果我設置是這樣的：

border-width: 2px; 
border-color: transparent; 
border-style: inset;

邊境在Chrome已經走了，但在FF它使現場調整焦點。

JSFiddle

任何想法如何擺脫3D邊界不傷害在FF appearence？

來源

2014-01-10 ChatCloud

您是否添加了<！DOCTYPE html>'作爲您的html頁面的第一行？ –

首先要添加上:focus一個2pxborder，所以因此，外地移動爲border需要空間的元素之外，而不是裏面，擺脫了鉻合金的灰色邊框，你需要使用-webkit-appearance: none;，還可以使用-moz-appearance: none;這將擺脫鉻灰色邊框，並且好看在Firefox input場...

input { 
    padding: 4px; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
}

Demo

現在，規範較多，加上border: 2px solid #eee;的input標籤

input { 
    padding: 4px; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    border: 2px solid #eee; /* Here */ 
}

Demo 2

注意：您正在使用通用元素選擇，所以所有的input 領域將受到影響，可以考慮使用class或id代替。

來源

2014-01-10 12:14:31

upvote +1，因爲你有這麼少的可信度：D –

如何刪除在Chrome

回答

相關問題