Drop-down list is a common feature in HTML5 to create web pages attractive. It is a toggleable menu in which user can select one value from predefined list. First item will be shown selected automatically. To create a drop-down list we use <select> element.
To add options inside the <select> element we use <option> tag.
The drop-down menu is just like radio buttons and check boxes, the only advantage is that it occupies less space.
Suppose we use drop-down in selecting state, so it will be easier to select state rather than typing.
The <select> tag defines the following menu:-
- name- name of the field, so that user can identify the fields.
- size- defines how many items should be visible in list.
- multiple- user can select multiple options.
Below is the example of custom Drop-down:-
HTML-
<body>
<div class="form-select">
<select name="" id="state_select">
<option value="3">Andra pradesh</option>
<option value="5">Haryana</option>
<option value="10">Uttarakhand</option>
<option value="25">Rajasthan</option>
<option value="50">Punjab</option>
</select>
</div>
</body>
CSS-
.form-select {
width: 200px;
}
.form-select select {
width: 100%;
height: 45px;
margin: 8px 0;
border: 0;
border: 1px solid black;
border-top: 4px solid black;
background-size: 20px;
background-position: right 10px center;
font-family: 'Arial';
padding-left: 24px;
-webkit-appearance: none;
-moz-appearance: none;
}
You can check this example in below link:-
https://jsfiddle.net/t7o2k3xr/
0 Comment(s)