ドロップダウンの背景画像が Chrome で表示されないのはなぜですか?

Chrome ドロップダウンの背景画像の問題

CSS を使用して選択/ドロップダウン要素に背景画像を適用しようとすると、正しく表示されない場合がありますクロムで。これは、解決が困難な一般的な問題です。

次の 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>

To Chrome でこの問題を解決するには、-webkit-Appearance プロパティを使用してドロップダウンのデフォルトの外観を削除する必要があります:

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

この CSS ルールは、デフォルトのドロップダウンの外観を無視してカスタム スタイルを適用するように Chrome に指示します。

必要に応じて、背景の一部としてドロップダウン矢印を含む画像を含めることもできます。これにより、よりシームレスな外観が提供され、ユーザー エクスペリエンスが向上します。

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