How to create html select drop-down box style? Detailed explanation of html select style-HTML Tutorial-php.cn

How to create html select drop-down box style? Detailed explanation of html select style

寻∝梦

Release： 2018-08-30 11:32:56

Original

15062 people have browsed it

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>

Copy after login

This is the rendering after I click on it:

How to create html select drop-down box style? Detailed explanation of html select style

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>

Copy after login

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:

How to create html select drop-down box style? Detailed explanation of html select style

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>

Copy after login

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>

Copy after login

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!