CSS3のwebkit-tap-highlight-colorプロパティの使用方法

今回は、CSS3のwebkit-tap-highlight-color属性の使い方と、CSS3のwebkit-tap-highlight-colorを使用する際の注意事項について説明します。実際のケースを見てみましょう。

-webkit-tap-highlight-color

このプロパティは、iOS (iPhone および iPad) でのみ使用できます。 Javascript で定義されたリンクまたはクリック可能な要素をクリックすると、半透明の灰色の背景で表示されます。この動作をリセットするには、-webkit-tap-highlight-color を任意の色に設定します。
このハイライトを無効にするには、色のアルファ値を 0 に設定します。

例: ハイライトの色を 50% の透明な赤に設定します:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

ブラウザのサポート: iOS (iPhone および iPad) のみ。

css3 の webkit-text-size-adjust の詳細な説明

1 スタイル設定時。 font-size

2、-webkit- を使用できます。 text -size-adjust を本文に配置すると、ページのスケーリングが失敗します

3. 本文は html

4 で定義されたスタイルを継承します。 global

outline: none

(1) PC上のaタグにこのスタイルを定義する目的は、

ieブラウザでaタグをクリックしたときに表示される点線を解除することです。 IE7 以下のブラウザはまだこの属性を認識しません。Chrome でデフォルトのテキスト ボックスのフォーカス スタイルをキャンセルするには、hidefocus="true"

(2)input, textarea{outline:none} を a タグに追加する必要があります。 3) モバイル版では機能しません。テキストボックスのデフォルトのスタイルを削除するには、-webkit-

Appearance

を使用します。フォーカス時にデフォルトのスタイルをキャンセルするには、-webkit-tap-highlight を使用します。 -色。

この属性を追加するモバイル リセット ファイルをいくつか見ましたが、実際には冗長です。

webkit-Appearance

-webkit-appearance: none;   //消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 。

注:

この属性を使用した後は、入力のタイプが異なると動作が異なります。テキストとボタンにはスタイルがなく、ラジオとチェックボックスは直接消えます-webkit-user-select

-webkit-user-select: none; // 禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整

-webkit-touch-callout

-webkit-touch-callout:none;  // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

の事例を読んだ後、あなたはこの方法をマスターしたと思います。この記事、さらに php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

HTML+CSSの4つの非表示方法

CSSとHTMLの間でよくある使用上の誤解

CSSスタイルでのborder-imageの使用の詳細な説明

以上がCSS3のwebkit-tap-highlight-colorプロパティの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。