Materialize Select box

The Materialize CSS framework has options to create the beautiful looking select box in your web forms. You may create simple select – option that enables visitors selecting an option from the select dropdown.

A select dropdown with option groups can also be created easily. Besides, multiple options can also be selected where a checkbox is visible along with option text.

The select dropdown, which is a jQuery plug-in, also enables you attaching images with the options. The next section shows you examples of these select dropdown along with code snippets.

The example of simple materialize select

The simple select dropdown can be created by using the ordinary HTML code i.e. <select> and <option> tags. The style is applied automatically to the select box.

As mentioned, you also need to initialize the plug-in in the jQuery code as shown in the example below:

materialize select

See online demo and code

The markup:

A little jQuery code:

You can see, the first option is disabled that asks the question: What do you think?. The dropdown opens with a nice smooth effect. As the dropdown is opened, the first option becomes disabled by using the disabled attribute in the <option> tag.

Note: Make sure including the materialize.min.css, materialize.min.js and jQuery library to make select dropdown work.

Allowing multiple selection of options example

Just add the multiple attribute in above example and Materialize select plug-in will display options with checkboxes. As an option is selected, the green tick mark is displayed while unselected options are displayed with a 2px bordered checkbox. Have a look:

materialize select multiple

See online demo and code

The code:

Learn more about Materialize checkboxes and how to customize

Create select dropdown with option groups

If your list of options in a select dropdown is category based then you may break up those into option groups. Just like the above examples, the select box with the option groups may be created simply with single option selection or by using multiple attribute, allow visitors selecting multiple options.

In the case of multiple attribute, the checkboxes appear just like above example. Have a look at the demo below with option groups with multiple attribute:

materialize select option group

See online demo and code

The markup:

The select box with images

One of the cool features of the select in Materialize CSS is displaying the images with options in the select box. For specifying an image, use the data-icon attribute in the <option> tag and provide the image path for that specific option. For example:

<option value=”1″ data-icon=”images/some_image.png”>Option with image 1</option>

See the example online and screen shot below:

materialize select images

See online demo and code

The markup with images:

Creating select dropdown with browser defaults

For getting the browser default select dropdown, use the browser-default class in the <select> tag and this is how it opens and looks:

select browser defaults

See online demo and code

The markup for <select> tag:

    <select class=”browser-default”>

See the full code on the example page.