Over the past two years, the development of web applications (websites) has advanced greatly and what we used to create a website earlier is already outdated or more recent methods have appeared.

Previously, to create a dropdown list in html ( in English. - dropdown), we just used And . The fact is that we can still use it, but often we need to change the styles and adapt the color scheme of the drop-down list to the design style. Unfortunately, it’s not always possible to style it the way you want, because select and option have their own limitations and poor cross-browser support.

Especially for this article, I found 16 different examples that may be useful during website development. And so let's get started.

1. Custom list

Html template that allows you to customize your own colors for the dropdown list.

2. Made with CSS3/JavaScript

Written in CSS3 and JavaScript. Regular drop-down list.

3. Style: subway stations

Transparent drop-down list with the style of metro stations.

4. Dropy. Written in SCSS & jQuery

5. For long issuing lists

An excellent solution for long drop-down menus.

A dropdown menu that is written in pure CSS without using any scripts.

Perfect for side menus on a website to visually show categories on a website.

8. Stylish user settings menu

9. CSS3 Dropdown List

Made in UI style, it will fit the UI style of the site.

12. Flag selection

Dropdown in country selection style.

13. Plain HTML, CSS dropdown

I hope you liked my selection. Leave comments, share your opinion and send your own works!

How to make a drop-down list in html (TOP 16 selection) from bologer

Last update: 04/08/2016

The select element creates a list. Depending on the settings, this can be a drop-down list for selecting one element, or an expanded list in which you can select several elements at once.

Let's create a drop-down list:

Select model:

iPhone 6S Lumia 950 Nexus 5X Galaxy S7

Inside the select element are option elements - list elements. Each option element contains a value attribute, which stores the value of the element. However, the value of the option element does not have to match the text it displays. For example:

iPhone 6S

With the selected attribute we can set the default selected element - it doesn't have to be the first element in the list:

iPhone 6S Lumia 950 Nexus 5X

Another attribute, disabled, can be used to prevent a specific element from being selected. Typically, elements with this attribute are used to create headings:

Select model iPhone 6S Lumia 950 Nexus 5X

To create a multiple choice list, you need to add the multiple attribute to the select element:

Select model:
iPhone 6S Lumia 950 Nexus 5X Galaxy S7

By holding down the Ctrl key, we can select several elements in such a list:

Select also allows you to group elements using a tag :

Select model: iPhone 6S iPhone 6S Plus iPhone 5SE Lumia 950 Lumia 950 XL Lumia 650

Using element groups applies to both drop-down and multiple-select lists.

Very often, when registering or surveying on sites, you are asked to do something selection from dropdown list. For example, select your country from many other countries. All these are different elements of the form, they can be designed in different ways: from simple HTML5 to complex CSS3.

Today we will look at one such example of designing a select field using HTML/CSS and an icon Font Awesome. But we will start, as usual, with document markup.

HTML code

Inside a tag select there are dropdown list items option. In turn, tags select And form nested in a common container div. Tag form must be present if the data will subsequently be sent to the server.

Positioning the container with the class box in the center of the window.

Box(
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

We connect the icon font before the closing tag in advance head.

Styling the selector

We set the dimensions for the selection field - 250x50 pixels and make the fields for the items 10 pixels on all sides.

Box select(
width: 250px;
height: 50px;
padding: 10px;
}

Removing the frame and stroke:

Border: none;
outline: none;

We specify purple background color, title, color and font size for lists.

Background: #ab05af;
font-family: "Russo One", sans-serif;
color: #fff;
font-size: 20px;

Create a shadow around the field.

Box-shadow: 0 5px 20px rgba(0,0,0,.3);

Generally select box ready and working, but it looks boring, and the triangle you need to hit with the mouse is very small. And if I thought so, then the designer will think the same, we need to prepare in advance for different options.

Most likely, the designer will replace the tiny triangle with an icon from the font Font Awesome.

It looks much nicer this way, but the code still needs to be written by a layout designer. What could be the solution here? We won't touch HTML code, and use a pseudo-element before.

Before pseudo-element for .box

The first thing to do is to write down the icon code and font name "Font Awesome 5 Free". Choose on the website fontawesome.com the desired icon indicating “selection” and copy its code.

.box::before (
content: "\f150";
font-family: "Font Awesome 5 Free";
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 28px;
background: #da00e0;
pointer-events: none;
}

Next, we position it absolutely, specify the dimensions 50x50, the color of the icon is white, the background is light purple. We set a very important property pointer-events: none. This means that the pseudo element before is not the object of the mouse event, but the value none tells the "mouse selection" event to go to the bottom layer and access the element underneath it - that little triangle. The triangle hasn't disappeared, it's just under the pseudo-element before, serving only as decoration. By clicking on the beautiful icon, the “ugly” triangle actually works and we make our choice.

A combo box, also called a drop-down menu, is one of the flexible and convenient form elements. Depending on the settings, you can select one or more values ​​from the list. The advantage of a list is its compactness and versatility; the list can occupy one or several lines, and you can select one or more values ​​from it. The combo box is created as follows.

Paragraph 1 Point 2

Tag acts as a container for list items and determines its appearance, whether it will be a drop-down list or a list with single or multiple choice. The appearance depends on the use of the size attribute of the tag , which sets the height of the list; the width of the list is determined automatically based on the length of the text inside . Below is a multiple selection list where items are highlighted using the Ctrl and Shift keys and a drop down list.

Tag attributes

Let's look at the tag attributes

, with which you can change the presentation of the list.

multiple

The presence of multiple tells the browser to display the element's contents as a multiple choice list. The final appearance of the list depends on the size attribute used. If it is absent, then the height of the list is equal to the number of items; if the value of size is less than the number of items, then a vertical scroll bar appears.

To select multiple list values, use the Ctrl and Shift keys together with the mouse cursor.

Example 1 shows how to create a multiple choice list.

Example 1: Multiple Choice List

HTML5 IE Cr Op Sa Fx

Cheburashka Crocodile Gena Shapoklyak Rat Larisa

name

Defines a unique element name . Typically, this name is used to access data via scripts or to retrieve a selected value by a server-side handler.

size

Sets the height of the list. If size is equal to one, then the list turns into a drop-down list. The default value depends on the multiple attribute. If it is present, then the size of the list is equal to the number of elements. When multiple is not present, the value of the size attribute is 1.

Tag attributes

Tag

also has attributes that affect the appearance of the list, they are presented below.

selected

Makes the current list item highlighted. If the tag

the multiple attribute is added, then you can select more than one item.

value

Defines the list item value that will be sent to the server. A “name/value” pair is sent to the server, where the name is specified by the name attribute of the tag , and the value is the value attribute of the selected list items. The meaning can either coincide with the text of the item or be independent.

label

Designed to indicate the label of a list item, abbreviated compared to the text inside

. If the label attribute is present, then the text inside the tag is ignored and the value of label is displayed in the list. Firefox browser does not support this attribute.

Creating a list is shown in example 2.

Example 2: Using a list

HTML5 IE Cr Op Sa Fx

Choose a character

Cheburashka Crocodile Gena Shapoklyak Rat Larisa

Grouping List Items

If the list is quite extensive, it makes sense to group its elements into blocks to ensure the list is visual and easy to work with. The tag is used for this purpose . It is a container inside which tags are located combined into one group. Feature of the tag is that it is not highlighted like a regular list element, it is emphasized using bold style, and all elements included in this container are shifted to the right of their original position. To add a group title, use the label attribute, as shown in Example 3.

Example 3: Grouping List Items

HTML5 IE Cr Op Sa Fx

Snack Barskaya Crayfish stuffed royally Bits in a pot Slavic dumplings Ukrainian donuts Roast in Kharkov style

The result of the example is shown in Fig. 1.

Rice. 1. Grouped list

A dropdown list in HTML can be created using a tag select. In addition to the drop-down (or "drop-down") list, the tag select allows you to create a list item with multiple selection. Tag usage syntax select The HTML looks like this:

Elektronik Syroezhkin Chizhikov Kukushkina

Here using the tag option list elements are specified.

Result of application:

Electronics Syroezhkin Chizhikov Kukushkina

SELECT tag attributes

Let's look at the tag attributes select:

• name
• size- number of displayed lines in the list (number);
• multiple- enables the function of multiple selection of drop-down list elements;
• disabled- blocks access to the element;
• form- allows you to bind a drop-down list to a form (may be necessary if the list itself is outside the form to which it should be linked). The form id is passed as an argument.

Perhaps these are all the main attributes of the tag select which are most often used. Let's now see how to make a dropdown list in HTML using the specified attributes:

Elektronik Syroezhkin Chizhikov Kukushkina

OPTION tag attributes

Tag option, as already noted, allows you to define children of the dropdown list select, which, in turn, plays the role of a container. Tag option has its own attributes:

• disabled- sets a ban on selecting a given list element;
• label- allows you to set a label for the current list element (instead of the text specified in the tag, the value of the label is displayed, which allows you to display an abbreviated value); Please note: this attribute is not supported in Firefox.
• selected- the current list item will be selected by default;
• value- the value that will be transferred to the server;

Let's look at an advanced use case for the tag option:

Mister Electronic Syroezhkin Chizhikov Kukushkina

The result of the example above will look like this:

Mr. Electronics Syroezhkin Chizhikov Kukushkina

The Nubex website builder allows you to create custom forms using the form builder module. The operation of drop-down lists in Nubex is described in the article: