30

どのブラウザーでも同じように見えるように、デフォルトの Chrome 入力のアウトライン スタイル (フォーカス時、オレンジ色) を設定するにはどうすればよいですか? Chrome スタイルは のようですがtextarea:focus{outline: rgb(229, 151, 0) auto 5px; outline-offset: -2px}、機能しません (他のブラウザにはありません) auto。outline-style

4

6 に答える 6

33

デフォルトの Chrome アウトライン スタイル:

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;
 }
于 2015-02-08T18:22:17.843 に答える
11

私の解決策があなたにとって十分かどうかはわかりませんが、これまでのところ、他の方法はわかりません...私は次のようにします：

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;
}
于 2014-04-07T11:01:07.540 に答える
1

Chrome 60 では、アウトラインが青色になりました。

アウトラインの自動スタイルは、角が「ノッチ」された 1 ピクセルのアウトラインを作成します。

これは、次のように ::before および ::after ルールを使用して実現できます。

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;
}

最初のルールは境界線の色を変更します。

2 番目のルールは、左から 1 ピクセル内で始まり、右から 1 ピクセル内で終わる上下の境界線を提供します。

3 番目の規則は、上から 1 ピクセル下で開始し、下から 1 ピクセル上で終了する左右の境界線を提供します。

警告: ::before/::after 絶対配置が機能するためには、包含要素が明示的に「位置: 相対」である必要があります。

クラス名「someclass-focus」は無意味です...疑似フォーカスのアウトラインを表示/非表示にしたいときはいつでも適用/削除する必要があります。

于 2017-10-06T17:54:08.893 に答える
-1

あなたは本当にできません。

Chrome は「auto」アウトライン スタイルを (それが何を意味するにせよ) 使用しますが、これは 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/

于 2014-09-29T11:23:23.707 に答える