Wie ändere ich die Textfarbe eines bestimmten „' innerhalb eines „Dropdown'?

Ändern der Textfarbe einer innerhalb eines

Wenn Sie versuchen, die Textfarbe der ersten Option in einer Dropdown-Liste zu ändern, kann es bei der Verwendung von CSS-Klassen zu Schwierigkeiten kommen. Hier ist eine Lösung:

Um nur die Farbe der ersten Option zu ändern, wenden Sie einen Inline-Stil direkt auf diese Option an:

<code class="html"><option style="color: grey" value="null">select one option</option></code>

Dieser Ansatz stellt sicher, dass der Stil nur für die erste Option gilt , wobei die übrigen Optionen in ihrer Standardfarbe Schwarz belassen werden.

Um den Stil der anderen Optionen weiter anzupassen, erstellen Sie eine CSS-Klasse mit dem Namen „others“:

<code class="css">.others {
    color: black;
}</code>

Dann fügen Sie „ other"-Klasse auf die verbleibenden Optionen:

<code class="html"><option value="1" class="others">one</option>
<option value="2" class="others">two</option></code>

Dadurch werden alle Optionen außer der ersten auf Schwarz gesetzt. Die Kombination aus Inline-Stil und CSS-Klasse stellt sicher, dass die erste Option grau bleibt, während die anderen schwarz sind.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Textfarbe eines bestimmten „' innerhalb eines „Dropdown'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：Wie zentriere ich Bootstrap-Karussell-Beschriftungen vertikal und positioniere sie leicht links? Nächster Artikel：Wie erreicht man eine dynamische Größenänderung für Bootstrap-Modale basierend auf dem Inhalt?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

2

1681

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

10

1833

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

1560

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

1466

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

1517

verwandte Themen

Mehr>

• Welche Funktion hat der Frequenzteiler?
• Welche Arten von CSS-Selektoren gibt es?
• Welche Probleme kann js Event Bubbling lösen?
• Der Unterschied zwischen Heap und Stack
• Was bedeutet es, eine Verbindung zu Windows herzustellen?
• Der Windows-Bildbetrachter kann nicht genügend Speicher anzeigen
• location.hash
• So öffnen Sie eine MDS-Datei

Beliebte Empfehlungen

• So stellen Sie CSS so ein, dass es die Anzeigeellipsen überschreitet
• So legen Sie die Schriftgröße in CSS fest
• So verwenden Sie Hover in CSS
• So legen Sie den Zeichenabstand in CSS fest
• Was sind die neuen Funktionen von CSS3?

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1415308
• 
  php入门教程之一周学会PHP

  4253378
• 
  JAVA 初级入门视频教程

  2462251
• 
  小甲鱼零基础入门学习Python视频教程

  502670
• 
  PHP 零基础入门教程

  842921

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1415308 Lernzeiten
• 
  JAVA 初级入门视频教程

  2462251 Lernzeiten
• 
  小甲鱼零基础入门学习Python视频教程

  502670 Lernzeiten
• 
  Web前端开发极速入门

  215166 Lernzeiten
• 
  零基础精通 PS 视频教程

  873451 Lernzeiten

• 
  【web前端】Node.js快速入门

  6108 Lernzeiten
• 
  国外Web开发全栈课程全集

  4664 Lernzeiten
• 
  Go语言实战之 GraphQL

  4018 Lernzeiten
• 
  550W粉丝大佬手把手从零学JavaScript

  600 Lernzeiten
• 
  python大神Mosh，零基础小白6小时完全入门

  20454 Lernzeiten

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage

• [表单按钮] jQuery企业留言表单联系代码
• [播放器特效] HTML5 MP3音乐盒播放特效
• [菜单导航] HTML5炫酷粒子动画导航菜单特效
• [表单按钮] jQuery可视化表单拖拽编辑代码
• [播放器特效] VUE.JS仿酷狗音乐播放器代码
• [html5特效] 经典html5推箱子小游戏
• [图片特效] jQuery滚动添加或减少图片特效
• [相册特效] CSS3个人相册封面悬停放大特效

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

• [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

Über uns Haftungsausschluss Sitemap

Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！