Home >Web Front-end >Front-end Q&A >How to add css style to select
How to add css style to select
- 青灯夜游Original
- 2022-01-20 17:54:035166browse
Adding method: 1. Add the id or class attribute to the select tag and set the attribute value; 2. Embed the style tag pair in the head tag pair; 3. In the style tag pair, use "#id value { css property: value;}" or ".class value {css property: value;}" statement to add css style.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Add css style to select in html
Add id or class attribute to select tag and set attribute value
In the style tag pair, use the id or class selector to select the select element and set the style
Implementation code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#select{
background-color: #000000;
color: white;
width: 100px;
height: 30px;
}
.select{
background-color: pink;
color: white;
width: 100px;
height: 30px;
}
</style>
</head>
<body>
<select id="select">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select class="select">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
(Learning video sharing: css video tutorial)
The above is the detailed content of How to add css style to select. For more information, please follow other related articles on the PHP Chinese website!