Home >Web Front-end >HTML Tutorial >How to create html select drop-down box style? Detailed explanation of html select style
How to create html select drop-down box style? Detailed explanation of html select style
- 寻∝梦Original
- 2018-08-30 11:32:5615056browse
This article mainly introduces the production of drop-down boxes of HTML select tags, as well as the style analysis of HTML select tags. Finally, there are two cases of HTML select tags. Next, let’s take a look at this article
First of all, let’s take a look at the creation of the html select drop-down box style:
The native select drop-down box is actually quite It is convenient to write options directly into option to get a smooth drop-down box, but the native style is also worrying.
First of all, the style results rendered in major browsers are also diverse. The style under IE is even more unique, and it will slide according to the position of the option.
We use pure HTML here, not even cascading style sheets:
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<script type="js/index.js"></script>
<title>php中文网之下拉列表</title>
</head>
<body >
<form>
<p>下拉列表</p>
<select>
<option>html</option>
<option>php</option>
<option>python</option>
<option>其它</option>
<option>html</option>
<option>php</option>
<option>python</option>
<option>其它</option>
</select>
</form>
</body>
</html>This is the rendering after I click on it:
We have completed the HTML select drop-down box. Next, let’s look at other style ideas of HTML select:
1. Remove the select first The original style itself.
2. Use an element (div/lebal, etc.) as the parent element of select.
3. Use: after to create a new style after the select parent element.
<body>
<br />
<select id="selectTravelCity" title="Select Travel Destination">
<option>php中文网</option>
<option>Washington DC</option>
<option>Los Angeles</option>
<option>Chicago</option>
<option>Houston</option>
<option>Philadelphia</option>
<option>Phoenix</option>
</select>
<br />
<br />
<label id="lblSelect">
<select id="selectPointOfInterest" title="Select points of interest nearby">
<option>PHP中文网</option>
<option>food beverage</option>
<option>restaurant</option>
<option>shopping</option>
<option>taxi limo</option>
<option>theatre</option>
<option>museum</option>
<option>computers</option>
</select>
</label>
</body>So many, although it is not difficult, but you still need to practice more
After looking at the above picture, it is easy to think of the effect of this, but I will still give the effect Pictured:
Two case analyzes of HTML select tags:
Case 1: How to make the Can't select?
Suppose there is a selection with several options. Due to testing needs, one of the options must be fixed and the others cannot be selected. What should be done? If this select is disabled, the result is that the value cannot be obtained at all. Is there any other way? Readonly is also not possible and can still be selected.
Answer: Just put one option or add disabled="disabled" to the option
<form id="form1" name="form1" method="post" action="">
<select name="select">
<option>aa</option>
<option disabled="disabled">bb</option>
<option>cc</option>
</select>
</form>Case 2: How to adjust the width of the select?
Answer: You can add style to the select tag
<style>.s1{ width: 200px;}</style>
<select class="s1">
<OPTION>很长很长也能显示</OPTION>
<OPTION>很长很长也能显示</OPTION>
</select>The above is the entire content of this article. If you have any questions, please feel free to ask below.
【Editor’s Recommendation】
html5 What does the canvas tag mean? Introduction to how to use the canvas tag
How to use the insert text ins tag and delete text del tag together in HTML? (With examples)
The above is the detailed content of How to create html select drop-down box style? Detailed explanation of html select style. For more information, please follow other related articles on the PHP Chinese website!