複製Chrome默認輸入的大綱樣式

Question

如何設置默認Chrome輸入的大綱樣式（焦點，橙色）？因此，它在每個瀏覽器中都是相同的？ Chrome風格似乎是textarea:focus{outline: rgb(229, 151, 0) auto 5px; outline-offset: -2px}，但它不起作用（其他瀏覽器的outline-style沒有auto）。

Answer 1

試一下：

Browsers' default CSS for HTML elements

你有谷歌瀏覽器的默認CSS那裏。我敢肯定，風格將在那裏定義。

P.S .:你會想要Chrome/Safari（WebKit）。

Answer 2

如果您在Chrome中打開樣式面板時檢查任何輸入標籤，則應該會看到默認的用戶代理樣式表屬性。使用Web開發人員工具中的顏色選擇器或Chrome顏色選擇器插件來獲取rgb值。

Answer 3

不知道是不是我的解決辦法是給你足夠好，但到目前爲止，我不知道任何其他方式...我不喜歡這樣寫道：

textarea:focus 
{ 
    outline:none; /*or outline-color:#FFFFFF; if the first doesn't work*/ 
    border:1px solid #48A521; 
    -webkit-box-shadow: 0px 0px 4px 0px #48A521; 
    box-shadow: 0px 0px 4px 0px #48A521; 
} 

Answer 4

你不能，真。

Chrome使用'自動'輪廓樣式（不管這可能意味着什麼），並且不符合CSS3規範。

你最好的選擇是創建你自己的高光造型和（至少）覆蓋大綱風格。這樣所有的瀏覽器都會爲你的頁面設置相同的焦點元素。

複製鉻風格很難做到。由於默認情況下css不支持陰影輪廓，所以只支持實體，虛線等樣式。您將不得不使用box-shadow來模仿它，但是，由於某種奇怪的原因，這會導致輸入框的邊框顯示（以插入樣式），這迫使您定義輸入框的邊框。

例如，你可以做這樣的事情：

input:focus { 
    box-shadow: 0px 0px 8px blue; 
    outline-style: none; 
} 
input { 
    border: 1px solid #999; 
} 

http://jsfiddle.net/dstibbe/2wr0pge2/2/

Answer 5

default Chrome outline-style:

outline-color: rgb(77, 144, 254); // #4D90FE 
outline-offset: -2px; 
outline-style: auto; 
outline-width: 5px; 

轉換爲該

input:focus { 
    outline:none; 
    border:1px solid #4D90FE; 
    -webkit-box-shadow: 0px 0px 5px #4D90FE; 
    box-shadow: 0px 0px 5px #4D90FE; 
} 

Answer 6

隨着鉻60大綱現在是藍色。

輪廓的自動樣式會創建一個像素輪廓，拐角處爲「缺口」。

這之前和之後::規則，像這樣使用::來實現：

DIV.someclass--focus { 
    outline:none; 
    border: 1px solid #86A8DF !important; 
} 
DIV.someclass--focus::before { 
    position:absolute; 
    margin-top:-2px; 
    margin-bottom: -2px; 
    margin-left: -1px; 
    margin-right: -1px; 
    top:0px; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    content: ' '; 
    border-left: none; 
    border-right: none; 
    border-top: 1px solid #A6C8FF; 
    border-bottom: 1px solid #A6C8FF; 
} 
DIV.someclass--focus::after { 
    position:absolute; 
    margin-top: -1px; 
    margin-bottom: -1px; 
    margin-left: -2px; 
    margin-right: -2px; 
    top:0px; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    content: ' '; 
    border-left: 1px solid #A6C8FF; 
    border-right: 1px solid #A6C8FF; 
    border-top: none; 
    border-bottom: none; 
} 

的第一個規則改變邊框的顏色。

第二條規則提供了一個頂部和底部邊框，從左側開始一個像素，從右側開始一個像素結束。

的thirder規則規定，從頂部開始向下一個左，右邊框，並從底部結束一個像素了。

CAVEAT：含元素必須是明確地「位置：相對於」爲了使::前/後::絕對定位工作。

類名「SomeClass的焦點」是沒有意義的......它只是被應用/只要你想的僞焦點輪廓出現/消失移除。