Цвет фона элемента раскрывающегося списка HTML - PullRequest
Новая
       0

Цвет фона элемента раскрывающегося списка HTML

4 голосов
/ 15 апреля 2011

У меня есть выпадающее меню с пунктами, и я хотел использовать ODD и ДАЖЕ, чтобы чередовать цвета. У меня вопрос ... Какой CSS-код для оформления элементов выпадающего списка, пожалуйста?

Ответы [ 3 ]

8 голосов
/ 15 апреля 2011

Использование псевдокласса CSS nth-child : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>HTML Dropdown list item baground colors</title>
    <style type="text/css">
        #myForm select option:nth-child(odd) {
            color:black;
            background:yellow;
        }
        #myForm select option:nth-child(even) {
            color:white;
            background:blue;
        }
        #myForm select {
            background:green;
            color:orange;
        }
    </style>
</head>
<body>
    <form id="myForm" action="#" method="get">
        <select>
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
            <option>E</option>
            <option>F</option>
        </select>
    </div>
</body>
</html>
1 голос
/ 15 апреля 2011

Вы можете установить другой фон как: 

#o1{background:red;}
#o2{background:green;}
#o3{background:#FFEA76;}

<option id="o1">blah 1</option>
<option id="o2">blah 2</option>
<option id="o3">blah 3</option>
0 голосов
/ 30 июля 2018

Вы можете установить стиль по умолчанию для элементов списка, а затем применить более специфический стиль для изменения четных элементов.Нечетные элементы получат стиль по умолчанию. 

.nav{
  padding: 0;
  list-style: none;
}
.nav li{
   color: #c1a404;
   background: #007e96;
   padding: 10px;
   font-size: 20px;
   font-family: Futura, sans-serif;
}
.nav li:nth-child(even) {
   color: white;
   background: dodgerblue;
}
<ul class="nav">
  <li>Home</li>
  <li>About Us</li>
  <li>News</li>
  <li>Careers</li>
  <li>Contact</li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...