CSS3のwebkit-tap-highlight-colorプロパティの使用方法-CSSチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-03-22 13:16:39

オリジナル

2825 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。