知っておくべき5つのCSSカスタマイズコード

ページを作成する際、一部のタグ (入力プレースホルダーなど) のデフォルトの動作をカスタマイズする必要が生じることがよくありますが、これらのデフォルト設定の CSS は一般的に覚えにくいため、自分で記録する必要があります。以下は、デフォルトの動作をリセットするためによく使用する CSS です。

1. プレースホルダー

タグでプレースホルダー attribute を設定する場合、場合によっては、プレースホルダーのデフォルトの色またはフォント サイズを変更する必要があります。 css:

// firefox
input::-moz-placeholder {
    color: red;
    font-size: 18px;
  }
// IE
input:-ms-input-placeholder {
  color: red;
  font-size: 18px;
}
// chrome
input::-webkit-input-placeholder {
  color: red;
  font-size: 18px;
}

ブラウザごとに記述方法が異なることに注意してください。

にはそれぞれのブラウザの接頭辞を付ける必要があります (-webkit- など)。 firefox と chrome は両方とも :: 2 つのコロンですが、IE は 1 つです : ;

以前のバージョンのブラウザでは、新しいバージョンのブラウザとは記述方法が異なる場合があります;

2. ドロップダウン ボックスの小さな三角形に小さな三角形が表示されます。

タグを選択します。通常はこの小さな三角形 I が削除されるか、要件を満たす背景画像に置き換えられます。小さな三角形の CSS を削除します:

-webkit-appearance: none; -moz-appearance: none;

では小さな三角形を削除する方法はありません。

3. input[type=number]nput[type=number] の右側にあるスピナーは、通常、モバイルデバイスで使用され、数値入力タイプを認識し、それに適応するように数字キーボードを変更します。 。ただし、スピナーが表示されますが、通常は必要ありません。スピナーを削除する CSS は次のとおりです:

// firefox
input[type='number'] {
  -moz-appearance:textfield;
}
// chrome
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

4, -webkit-tap-highlight-color

モバイル ブラウザー (WeChat や QQ 組み込みブラウザーなど) で、リンクをクリックするか、

要素をクリックすると、青い枠線が表示されます。私はこの枠線が嫌いなので、通常は削除します。

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

青い枠線が見えないように、ハイライトの色を透明に設定します。 5. スクロール バー

WebKit は、オーバーフロー属性、リスト ボックス、ドロップダウン メニュー、テキストエリアのある領域のスクロール バーのカスタマイズされたスタイルをサポートするようになりました。場合によっては、特にページ上に複数のスクロール バーがある場合、スクロール バーを削除する必要があることがあります。

::-webkit-scrollbar {
  width: 0;
}

スクロール バーを削除するには、スクロール バーの幅を 0 に設定します。スクロール バーのスタイルをカスタマイズする必要がある場合は、www.xuanfengge.com/css3-webkit-scrollbar.html をクリックして、スクロール バーのスタイルをカスタマイズする方法を紹介します。

上記は、プロジェクトでよく使用する覚えにくい CSS コードを記録しています。友達が、覚えにくい、よく使われる CSS コードを持っている場合は、お気軽に追加してください。

【関連おすすめ】

1.

3. php.cn Dugu Jiijian (2) - CSSビデオチュートリアル

以上が知っておくべき5つのCSSカスタマイズコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。