web-dev-qa-db-ja.com

Google Chrome> Textboxes>アクティブ時の黄色の境界線..？

今日フォームを変更し、Chromeでテストしています。境界線が0または0のテキストボックスを選択すると、黄色い境界線が周囲に表示されることに気付きました。誰もこの国境を取り除く方法を知っていますか？私は通常、それを気にしませんが、私が使用している配色では本当に恐ろしく見えます。

前もって感謝します。

よろしく、

リチャード

PS CSSで他の何かが境界線を黄色に設定している場合に備えて、！importantも使用してみました。

cssgoogle-chromeinputtextboxborder
43
ClarkeyBoy

これは、ボーダーではなく outline が原因です。表示される特定のスタイルは、ユーザーエージェント（ブラウザー）スタイルシートで定義されます。

Chromeの大きく強調表示されたアウトラインは多くの場合見栄えが悪いことに同意しますが、どのフィールドがアクティブであるかは明らかです。

2014年初頭の時点で、ハイライトは（黄色ではなく）青になり、ハイライト効果は小さくなりました。次の手順は、このスタイルを変更するために引き続き有効です。

アウトラインの削除

どの要素にもoutline: none;を設定して、ハイライトを完全に削除できます。

input[type="text"], input[type="password"] { outline: none; }

これにより、潜在的に（おそらく）アクセシビリティ/ユーザビリティが低下します。 専用のWebサイト アウトラインを完全に削除する危険性もあります。

アウトラインのスタイリング

より良い代替方法は、アウトラインのスタイルを設定して、表示されたままでも不快ではないようにすることです。 https://developer.mozilla.org/en-US/docs/CSS/outline を参照してください

デモ：http://jsfiddle.net/G28Gd/2/

INPUT[type="text"]:focus,
INPUT[type="number"]:focus,
INPUT[type="email"]:focus,
INPUT[type="search"]:focus,
INPUT[type="password"]:focus,
INPUT[type="range"]:focus
{
    outline: 1px solid #0033dd;    
}​

ユーザーの期待

スタイルシートの作成者は、ボタン、アクティブフォームフィールド、イメージマップなどの視覚的なオブジェクトの周囲にアウトラインを作成して、目立つようにしたい場合があります。

理論的には、アウトラインは美容目的で使用される場合がありますが、焦点を示す以外の実用的な使用法は見つかっていません。ただし、要素が実際にフォーカスされている場合にのみ、フォーカスのようなアウトラインを表示するのが最善です。言い換えると、そうでないときに要素に焦点を当てるようにしないでください。

HTMLアンカーもフォーカスを受け取ることができ、アウトラインもスタイル設定できることを覚えておいてください。これはユーザーにとって有用な手がかりになる可能性があります。

視覚的レンダリング

アウトラインプロパティで作成されたアウトラインは、ボックスの上に描画されます。つまり、アウトラインは常に一番上にあり、ボックスまたは他のボックスの位置やサイズには影響しません。したがって、アウトラインを表示または抑制しても、リフローやオーバーフローは発生しません。

アウトラインは任意の要素に適用できます（もう一度、ユーザーを混乱させないようにしてください）。

境界線とは異なり、ボックスの位置やサイズには影響しません。これは、たとえば、アンカーにフォーカスがあることを示す場合に重要です。アンカーに境界線を追加した場合、ボックス全体が境界線のサイズだけ目に見えるように移動します（ （試してみてください ）。比較すると、アウトラインはボックスをシフトしません。

このボックス非依存の欠点の1つは、アウトラインが常に予想どおりに正確にレンダリングされないことです。 置換された要素 は、特定のハイライトスタイルでは適切に表示されない可能性のある方法（現在または将来）でレンダリングされる場合があります。 <input type="range">は、この動作を確認するのに適した候補です。

enter image description here

このアウトラインは機能的ですが、あまりきれいではないか、正しく配置されていません（Chrome 26-29）。

現在、ボタン要素は、指定されたアウトラインでは正しく見えません（Chrome 21）（試してみてください-アウトラインはボタンのエッジに沿っていません）。

Chrome= 26の時点で、アウトラインはボタンの端に正しく配置されているように見えます。

75
Tim Medora

outlineであり、境界線ではありません。アウトラインCSSプロパティを使用します。

7
Core Xii