HTML select dropdown: Learn to Create and style with CSS

How to create HTML select dropdown with options

The <select> tag in HTML is used to create a dropdown that enables users selecting an option from the pre-defined set of values.

The text visible to the user can be different to the text in the value attribute of <select> tag. This is how you can create a dropdown, e.g.

This is how you can create a dropdown, e.g.

<select id="selectID">

<option value=”GR”>Green</option>

<option value=”YE”>Yellow</option>

<option value=”BL”>Black</option>

</select>
  • The dropdown is created by using the <select> tag.
  • Inside the <select> tag, you can create options by using the <option> tag.
  • Create as many options as you want.
  • You may use the value attribute in the <option> tag to access the selected option in scripting language like PHP, JS, jQuery etc.

You may also specify a CSS class instead of using ID to style the select–option dropdown.

In the following section, I will show you examples of using HTML dropdown from selecting the single option to using it with JavaScript / jQuery. The example also includes styling the select HTML tag with CSS/CSS3, Bootstrap framework. Let me start with a basic example to create a simple dropdown.

An example of creating a simple select-option

In this example, the <select> tag is used to create a dropdown with three options. See the demo online by clicking the link or image below:

HTML select

See online demo and code

The following markup is used in the above example for creating HTML select:

<select id="selectvalue">

<option>5</option>

<option>10</option>

<option>15</option>

<option>20</option>

<option>25</option>

</select>

 

Using the value attribute

You may use the value attribute in <select> tag. As mentioned earlier, the value can be different to the text displayed to the users. For example, you can show complete country or color names to the users while using a shortcode in the value attribute.

You may access this value in a scripting language like PHP or client side like JavaScript to perform certain actions.

See the following demo of creating a dropdown with value attribute:

HTML select value

See online demo and code

The following code is used for <select> tag:

<select id="selecttheme">

<option value="Mar">Maroon</option>

<option value="Gre">Green</option>

<option value="Yel">Yellow</option>

<option value="Blu">Blue</option>

<option value="Red">Red</option>

</select>

 

An example of accessing selected option in JavaScript

Let me move ahead and access the value/text of selected option and perform some action based on it. The same dropdown as in above example is created with options to select a color. After selecting the color, press the button to apply that color to the document. See the demo online:

HTML select option JavaScript

See online demo and code

The following code is used to create <select> dropdown:

<select id="selcolor">

<option value="Maroon">Maroon</option>

<option value="Green">Green</option>

<option value="Yellow">Yellow</option>

<option value="Blue">Blue</option>

<option value="Red">Red</option>

<option value="White">Other</option>

</select>

 

This line of code is used in the JavaScript section to access the value of <select> option:

var seltheme = document.getElementById(“selcolor”).value;

At the click event of the button, the JS function is called that assigns the selected value in the dropdown to a variable. This value is used in applying the color to the current document.

See the complete code including JS, markup and CSS in the demo page.

A demo of accessing visible text in jQuery

This time, I will use jQuery to access the value of selected option. You may access both the text as well as value in jQuery b y using different methods. In this demo, I will access visible text. See the demo online:

HTML select option jQuery

See online demo and code

You can see in the code, the value is different to text for each option in <select> tag. As you select a color, the jQuery displays the visible text in an alert. The <select> code is:

<select id="jqueryselect">

<option value="MAR">Maroon</option>

<option value="GRE">Green</option>

<option value="YEL">Yellow</option>

<option value="BLU">Blue</option>

<option value="RED">Red</option>



</select>

 

This is how its value is accessed in jQuery code:

var selectedcolor = $('#jqueryselect option:selected').text();

 

See the complete jQuery code and markup in the demo page.

Similarly, you may access the value by using the $.val() jQuery method:

var selectedcolor = $('#jqueryselect').val();

 

Replace this line in above example and it will display the shortcode/value of the color in value attribute rather visible text.

An example to get value in PHP script

In this example of getting the value of selected option of HTML dropdown, a form is created with a <select> tag in the markup section. After choosing a color from the drop-down, click the “Submit” button. The form’s data will submit to the same PHP file and it will display the selected color. See the demo online:

HTML select PHP

See online demo and code

The form method used in the example is “post”, so you may get the form controls values by using the $_POST[“”] PHP array. This is the form’s code used in the example:

<form action="" method="post">

<div class="seldemo">

<label>Select A Color: </label>

<select name="selphp">

<option value="Maroon">Maroon</option>

<option value="Green">Green</option>

<option value="Yellow">Yellow</option>

<option value="Blue">Blue</option>

<option value="Red">Red</option>



</select>

<p><input type="submit" value="Submit" class="btncls"></p>

</div>



</form>

 

And this is how PHP script is used to get the value:

<?php

if( $_POST["selphp"] != "" )

{

echo "You selected the following color:<strong>". $_POST["selphp"]."</strong>";

}

?>

 

If you specified the “get” method in form then you could use the $_GET[“”] PHP array.

Styling the select dropdown by CSS

Now, let me show how you may style the <select> dropdown by using the power of CSS. In the following demo, I have used a few simple CSS properties along with CSS3 gradient property.

See the demo and code online:

HTML select CSS

See online demo and code

Along with border linear-gradient, the box-shadow property is also used in the dropdown. The complete CSS class for this select dropdown is:

.selcls {

padding: 3px;

border: solid 1px #517B97;

outline: 0;

background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF));

background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px);

box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

width:150px;

}

 

Rounded borders by border-radius property

This dropdown is given the border-radius property of CSS3 to make the borders rounded. The color scheme is also changed. Play with border, width, padding and other properties as you want:

HTML select border radius

See online demo and code

Using multiple attribute and styling with CSS

In order to allow visitors choose multiple options in the <select> tag, you may use the multiple attribute. In above example, you saw only one option could be selected.

By using multiple attributes, a user may select more than one options by pressing the ctrl key as using windows platform.

See a demo online by clicking the links below:

HTML select multiple

See online demo and code

Use Bootstrap framework and plug-in for creating beautiful select dropdowns

If you are using the Bootstrap framework then there are nice plug-ins for creating cool select dropdowns.

One such plug-in is Bootstrap-Select which is explained here. It adds useful features to default dropdowns. For example, you may search the options by adding a textbox. This is particularly useful if there are many options in the dropdown.

Similarly, all selected options are visible as ticked and you may set the limit of selected options if using multiple attribute.

See a few demos of these <select> dropdowns, first a simple one where a user may choose two options.

HTML select Bootstrap

See online demo and code

A dropdown with search option demo

Using the same plug-in and adding a text box allowing users to search the options.

HTML select Bootstrap search

See online demo and code

See the complete code in the demo page.

Read more about this in the Bootstrap select tutorial.