チェックボックスの輪郭がクロムに​​表示されない

Question

クロムが良かったら幸いですが、現実的にはまだFirefoxほど良くはありません。

.blue { 
 
    outline: thin dotted yellow; 
 
    outline-offset: -2px 
 
}

<input class="blue" type="checkbox">

私は何かが足りないのですか？

Answer 1

あなたは間違ったプロパティ順、正しいものは持っている：

.blue { 
    outline: yellow dotted thin; 
    outline-offset: -2px 
} 

あなたはあなたのせいで何かのためにChromeを責めるべきではありませんが...

Answer 2

あなたはIEで動作し、このハックを使用することができますし、クロムでは、実際にはないと考えています。checkboxにはコンテンツがないため、::beforeを持つことはできません。それは何

.page input[type=checkbox].form-input-error:not([disabled])::before { 
    content: ' '; 
    background: transparent; 
    border: 3px solid crimson; 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: -3px -3px; 
} 

：

• は、チェックボックスが
• 無効になっていない場合、それは.form-input-error

Answer 3

と呼ばれるクラスを持っている場合、私はクロームでそれをチェックし

3px赤枠を追加します。いいんだよ。このように：

.blue { 
 
    outline: yellow dotted thin; 
 
    -webkit-outline: yellow dotted thin; 
 
    outline-offset: -2px 
 
}

<input class="blue" type="checkbox">