12

編集: 私の懸念はモバイル Web サイトです。

要点を説明しましょう。私が何をしても、outline:none; Ipod Touch/Iphone を使用して、入力フォーム要素からデフォルトの強調表示/グローを削除しません。

私がどこを見ても、人々は次のように言う：

input:focus {
outline:none;
}

また

input {
outline:none;
}

....そして、これはグローを削除します....そうではありません。

もう 1 つの大きな問題は、デフォルトのグローがないことです。スタイリングなしでフォーム入力のみの空白のページを作成し、IOS モバイル経由でページを表示すると、入力要素にグロー/アウトラインがありません...空白です。

-webkit-appearance:none; を使用することだけが機能します。-そして、それにより、入力要素にボックスの影を設定することができます。-webkit-appearance:none; を使用していない場合 - ボックスの影が正しく表示されません。

ただし、これをデスクトップ ブラウザで表示すると、Webkit がなくてもボックス シャドウは正常に機能します。

だから私の質問は次のとおりです。なぜ Outline:none; 入力要素には何の役にも立ちませんか? アンカータグだけを扱う人もいれば、入力要素を扱う人もいます。ここにいるのは誰？これまでのところ、私が何をしようとも、outline:none; 入力要素には価値がありません。

ここにJSfiddleがあります：

http://jsfiddle.net/QQGnj/4/show/

このページを iOS モバイルで表示すると、そもそも「グロー」またはデフォルトのスタイル設定がありません。Outline:none; を必要とするデフォルトのグロー動作はどこで見られますか。動作しますか（動作しません）？これは私を怒らせています！

4

6 に答える 6

7

使用する場合はoutline:none;、フォーカススタイルを追加してください。http://outlinenone.com/を参照してください。

この機能は、マウスを使用しない場合に非常に役立ちます。アウトラインは重要なアクセシビリティ機能を提供するため、それを削除する必要がある場合は、リンクのフォーカスとアクティブな状態のスタイルを追加し直してください。リンクが存在する場所をユーザーが理解できるようにしてください。

于 2012-10-05T14:50:09.560 に答える
7

これを試してください: -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

于 2013-02-28T15:10:05.660 に答える
3

使用する-webkit-appearance: none;

#yourElement:focus {
    -webkit-appearance: none;
}

#yourElement:hover {
    -webkit-appearance: none;
}

そして、それはトリックを行います。

于 2016-09-17T21:12:57.643 に答える
1 
a, :visited{ 
    outline: 0;
    outline: none;
}
:hover, :active, :focus{
    outline: 0;
    outline: none;
}

Chrome/osx、iphone/mobile safari、firefox/osx http://jsfiddle.net/toniehock/QQGnj/6/showで焦点を合わせたグローを削除しました

于 2012-07-13T18:04:35.537 に答える
1

私の場合、Magento2 では、上記のものではなく、ボーダーとボックス シャドウでした。

于 2020-11-03T13:55:09.043 に答える
0

Mobile Safari にはデフォルトoutlineのスタイルがないようですので、心配する必要はありません。ただし、デスクトップとモバイルのすべてのブラウザーで一貫した外観を保証するために、outline: noneとにかく設定することをお勧めします.

于 2012-07-04T23:01:27.057 に答える