CSS3 のあまり知られていないプロパティの簡単な分析: -webkit-tap-highlight-color

CSS の -webkit-tap-highlight-color 属性は、簡単に言えば、携帯電話でクリックされたときの背景色を設定する機能です。次の記事では、CSS3 のこのあまり知られていない属性を主に紹介します。ハイライト - 色に関する情報、必要な友達が参照できるように、以下を見てみましょう。

-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. スタイルシートのフォントサイズが 12 ピクセル未満の場合、中国語版の Chrome ブラウザーでのフォント表示は 12 ピクセルのままです。この場合、html{-webkit-text-size-adjust を使用できます。 :none;}

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

3 -webkit-text- を使用する場合、本文は html

4 で定義されたスタイルを継承します。サイズ調整、継承可能またはグローバルとして定義しないでください

概要: なし

(1) PC 上の a タグにこのスタイルを定義する目的は、a タグが変更されたときに表示される点線をキャンセルすることです。 IEブラウザでクリックしました。 IE7 以下のブラウザはまだこの属性を認識しません。Chrome でデフォルトのテキスト ボックスのフォーカス スタイルをキャンセルするには、hidefocus="true"

(2)input, textarea{outline:none} を a タグに追加する必要があります。 3) モバイル版では機能しません。テキスト ボックスのデフォルトのスタイルを削除したい場合は、-webkit-atp-highlight-color を使用して、フォーカス時にデフォルトのスタイルをキャンセルできます。 。

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

webkit-Appearance

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

注: この属性を使用した後は、入力の種類によって動作が異なります。テキストとボタンにはスタイルがありません。ラジオとチェックボックスには直接消えます

-Webkit-User-Select

rreee

webkit-touch-callout

rreee

more分析-既知の属性: -webkit-tap-highlight-color 関連記事については、PHP 中国語 Web サイトに注目してください。