異なるフォントを使用するためにselectの各オプションのスタイルを設定するにはどうすればよいですか(マテリアライズCSSフレームワークを使用)

dev99

このimgurlに示されているマテリアライズcssフレームワークで異なるフォントファミリーを使用するためにselectの各オプションのスタイルを設定したいこれは、inspect要素の使用から取得したIDで各オプションのスタイルを設定することで実現しましたが、ブラウザーが更新された
IDは自動生成され、次のようになります

li#select-options-5ea35c39-e3ba-6859-c611-43359ab710b32{
font-family: 'Homemade Apple', cursive !important;
font-size: 25px;}

私が試したこと

  1. オプションごとに異なるクラス/ IDを使用し、!importantを使用してcssでスタイル設定しますが、デフォルトのスタイル設定をオーバーライドしません。
  2. .dropdown-content, .select-dropdownクラスを使用しますが、このスタイルはすべてが個別ではありません
  3. .select-dropdown li>spanこれを使用して、選択したすべてのスタイルも設定します
dev99

@kushalおかげでうまくいきました..今私はそれを手に入れました..n番目の子ごとにspan要素をターゲットにしました

.select-dropdown>li:nth-child(2)>span{
font-family: 'Indie Flower', cursive;
font-size: 1.5em;
color: black;
}
.select-dropdown>li:nth-child(3)>span{
font-family: 'Dawning of a New Day', cursive;
font-size: 1.8em;
color: blue;
}

などなど..これが結果ですhttps://ibb.co/gvfMyWq

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ