ホームページ  >  記事  >  ウェブフロントエンド  >  選択/ドロップダウンの背景画像が Chrome で機能しないのはなぜですか?

選択/ドロップダウンの背景画像が Chrome で機能しないのはなぜですか?

DDD
DDDオリジナル
2024-10-31 12:49:31168ブラウズ

Why is My Select/Dropdown Background Image Not Working in Chrome?

選択/ドロップダウンの背景画像が Chrome で機能しない

Web ページの視覚的な魅力を高めようとすると、選択/ドロップダウン要素用の背景画像が Google Chrome でレンダリングされない問題。以下に提供されている CSS は Firefox と Internet Explorer では問題なく機能しますが、Chrome では表示できません。

<code class="CSS">#main .drop-down-loc {
  width: 506px;
  height: 30px;
  border: none;
  background-color: Transparent;
  background: url(images/text-field.gif) no-repeat 0 0;
  padding: 4px;
  line-height: 21px;
}</code>

解決策:

Chrome でこの問題を解決するには、次の CSS コードを使用できます:

<code class="CSS">select {
    -webkit-appearance: none;
}</code>

この CSS プロパティは、選択した要素に対する Chrome のデフォルトのスタイルを削除し、背景画像を含むカスタム スタイルを適用できるようにします。

さらに、必要に応じて、矢印を背景の一部として使用する場合は、それをカスタム背景画像に組み込んだ画像を含めることができます。

以上が選択/ドロップダウンの背景画像が Chrome で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。