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

零下一度
リリース: 2017-05-05 11:52:30
オリジナル
2065 人が閲覧しました

ページを作成する際、一部のタグ (入力プレースホルダーなど) のデフォルトの動作をカスタマイズする必要が生じることがよくありますが、これらのデフォルト設定の 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;
ログイン後にコピー

IE ブラウザ

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

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 組み込みブラウザーなど) で、リンクをクリックするか、

JavaScript でリンクを定義したとき

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

-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.

無料のCSSオンラインビデオチュートリアル

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!