How to add css style to select-Front-end Q&A-php.cn

How to add css style to select

青灯夜游

Release： 2022-01-20 17:54:03

Original

5118 people have browsed it

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.

How to add css style to select

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>

Copy after login

How to add css style to select

(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!