2011-07-06 16 views
15

デフォルトのCSS outlineをいくつかのフォームフィールドに復元したいのですが、デフォルトのWebkitまたはブラウザ固有のスタイルに復元します。入力フィールドにWebkitのCSSアウトラインを復元

私が扱っているページにはすべての要素にoutline: noneが適用されていますが、いくつかの項目のデフォルト設定に戻したいだけです。何か案は?

答えて

22

:どれも、輪郭線幅をリセットしない:0。これは、スタイルをクリアしたときにスタイルがまだあるだろう幅を再適用からブラウザを防ぐことができます。

input:focus { 
    outline-width: 0; 
} 

input.nostyle:focus { 
    outline-width: 5px; 
} 

http://jsfiddle.net/VT4Hb/

+1

これは実際の答えではありませんが、動作する非常に良い解決策です。ありがとう! –

3

アウトラインなしで必要なフィールドにクラスを使用します。代わりにアウトラインをリセットする

.nool { outline: none; } 
+2

OneOfOneは正しいです。 CSSでは、スタイルを元に戻すことはできません。できれば、どの要素にも "outline:none"を適用するCSSルールをすべて削除し、クラスを使用して、どのフォーム要素にアウトラインを付けるべきでないかを明確に指定します。 – jbarreiros

+1

@jbarreiros:動作しても、クラスをすべてに配置するのはエレガントでセマンティックなソリューションではありません。 Duopixelのソリューションは、純粋なCSSを使用してこれを実現します。 – Wylie

37

あなたの実際の質問(straight from WebKit's default html.css styles)への答えはこれです:あなたはスーパー熱心なら-webkit-focus-ring-colorの値は、あなたは、(別途各プラットフォーム上で決定される

:focus { 
    outline: auto 5px -webkit-focus-ring-color; 
} 

WebCore::systemFocusRingColorを探すことができます)。実際には、値はプラットフォームによって異なります。サファリのV6とOS XライオンのクロームV20で

、実際の値は次のとおりです。

outline: rgb(94, 158, 215) auto 5px; 

...とLinux上でWindowsとクロムV18にクロームV20で、私が得た値は以下のとおりであった:

outline: rgb(229, 151, 0) auto 5px; 

this great StackOverflow answerに記載されているように、run this jsFiddle to calculate the outline colour on your own machineとすることができます。

+0

これは選択された答えになるはずですが、duopixelは良い洞察を提供します。 – ooolala

関連する問題