ホームページ > 記事 > ウェブフロントエンド > 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 の詳細な説明
2、-webkit- を使用できます。 text -size-adjust を本文に配置すると、ページのスケーリングが失敗します3. 本文は html4 で定義されたスタイルを継承します。 globaloutline: none
(1) PC上のaタグにこのスタイルを定義する目的は、(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 サイトの他の関連記事を参照してください。