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

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:

    
    
    




下拉列表

html
php
python
其它
        html
php
python
其它

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.

        

        
            php中文网
            Washington DC
            Los Angeles
            Chicago
            Houston
            Philadelphia
            Phoenix
        
        

        

        
            
                PHP中文网
                food beverage
                restaurant
                shopping
                taxi limo
                theatre
                museum
                computers
            
        

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

  
    aa
bb
cc
  

Case 2: How to adjust the width of the select?

Answer: You can add style to the select tag

  很长很长也能显示
  很长很长也能显示

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!