html - Chrome 入力枠を赤で表示

Question

私はこのcss設定を使用したいと思います: border-color: red;
For inputelements.
しかし、そうすると、それらのメトリックはデフォルトのクロム境界とは異なります。

このjsfiddleを見てください：
http://jsfiddle.net/79QkJ/2/

両方の入力フィールドが異なって見えることがわかります。しかし、目に見える唯一の違いは、ご想像のとおり、赤い色です。

入力のデフォルトスタイルを別の色で複製する方法は?

score 2 · Accepted Answer

デフォルトのスタイルはのように見えるかもしれませんborder-width: 1px;が、実際には (少なくともクロムでは)border: 2px inset;です。差し込みスタイルは、赤ではうまく機能しないようです。

次のようなものを使用できます

border-color: 1px solid red;
padding: 2px 1px;

デフォルトのパディングはである1px 0;ため、に増やす必要があります2px 1px。

score 0 · Accepted Answer

あなたはそれを試すことができます：

#red-input {
    border-color: red;
    border-style: solid;
    border-width: 0.1em;
}

またはメタボーダープロパティも：

#red-input {
    border: 0.1em solid red;
}

サイズの「em」に慣れていますが、「px」を使用することもできます。

score 0 · Accepted Answer

これを試して

入力: フォーカス、選択: フォーカス、テキストエリア: フォーカス、ボタン: フォーカス { アウトライン: なし; }

4 に答える 4