概要：なし;動作しません - -webkit-appearance：none;働いています - ここで何が間違っていますか？

Question

編集：私の心配はモバイルサイト向けです。

私はポイントに右に行こう。私が何をしても、アウトライン：なし。 Ipod Touch/Iphoneを使用して入力フォームの要素からデフォルトのハイライト/グローを削除しません。

どこでも私は、人々が使用することを言って、見て：

input:focus { 
outline:none; 
} 

または

input { 
outline:none; 
} 

....これは輝きを削除します....うまくそうでないこと。

もう1つの大きな問題は、デフォルト光沢がないことです。私はスタイリングとフォーム入力だけの空白のページを作成し、IOSモバイル経由でページを表示し、入力要素には輝き/輪郭がありません。ただ空白です。

動作するのは、-webkit-appearance：none;を使用することだけです。それは単純に入力要素にボックスシャドーを設定することができます。私が-webkit-appearance：noneを使用していない場合、 - ボックスの影が正しく表示されません。

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

私の質問は次のとおりです。入力要素には何の目的も果たさない？私はアンカータグでしか働かないと言う人もいますが、入力要素に取り組んでいると言う人もいます。誰がここにいるの？これまでのところ、私が何をしていても、アウトラインはありません。入力要素では役に立たないここで

がJSfiddleです：iOS搭載の携帯電話でこのページを表示する

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

、そもそも何の「グロー」またはデフォルトのスタイリングはありません。誰もがデフォルトのグロー動作を見て、どこにoutline：none;仕事をする（それはしない）？これは私を怒らせている！

Answer 1

モバイルSafariはデフォルトのoutlineスタイルを持っていないようですので、心配する必要はありません。すべてのブラウザ、デスクトップ、モバイルで確実に一貫性のある外観を得るには、とにかくoutline: noneを設定することをおすすめします。

Answer 2

a, :visited{ 
    outline: 0; 
    outline: none; 
} 
:hover, :active, :focus{ 
    outline: 0; 
    outline: none; 
} 

は、あなたがoutline:none;を使用している場合は、フォーカスのスタイルを追加してくださいhttp://jsfiddle.net/toniehock/QQGnj/6/show Firefoxの/ OSX、iphone /モバイルサファリ、クローム/ OSXで

Answer 3

を私のために集中輝きを削除しました。 http://outlinenone.com/を参照してください。

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

Answer 4

これで試してみましょう： -webkit-tap-highlight-color：rgba（0、0、0、0）;

Answer 5

使用-webkit-appearance: none;

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

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

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