ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3 モバイルクリック events_html/css_WEB-ITnose に表示される背景ボックスを変更および削除します

CSS3 モバイルクリック events_html/css_WEB-ITnose に表示される背景ボックスを変更および削除します

WBOY
WBOYオリジナル
2016-06-21 09:09:341214ブラウズ

モバイル開発の大きな利点は、煩わしい IE ブラウザの互換性を無視して、Firefox などの一部の高度なブラウザでページが正常に表示されるだけで済むことです。
私は最近いくつかのモバイルページを書いていて、今日たまたまそのような魔法の CSS 機能に出会いました。それがタップハイライトカラーです

この特別な効果は、ボタンやハイパーリンクなど、モバイル端末上のどこかをクリックすると実装され、システムはデフォルトで灰色の背景といくつかのハイライト効果を追加します。しかし、これらの効果を望まない場合もあります。また、クリックしたことを意識させない感じを実現したい場合は、この時点でtap-highlight-colorを使用します。次のように、クリックされた要素に CSS スタイルを追加するだけです:
-webkit-tap-highlight-color:rgba(0,0,0,0);

このスタイルでは、クリック時の背景色も設定できます: たとえば:

-webkit-tap-highlight-color: rgba(240,240,240,0.7);

要素をクリックしたときに背景ボックスの色を変更できます。

選択したテキストの色を設定する方法もあります。

通常、テキストを選択したときの背景色は青です。次のスタイルを使用して、Web ページの選択したコンテンツのスタイルを設定できます。 333; }

::-webkit-selection {background:#FFF; color:#333;}

選択した色を削除したい場合は、背景を none に設定してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。