label
input
Without attributes.
Attributes: min="0" max="100" step="5".
min="0" max="100" step="5"
Attributes: min="-5.5" max="5.5" step="0.5".
min="-5.5" max="5.5" step="0.5"
Horizontal buttons: class="horizontal"
class="horizontal"
Without button.
button
Self caption.
Default width: 250px.
Standart select, one option innactive.
Select without a given width, having the item with long text.
Select with a width of 200px, having the item with long text.
Long list, limited in height.
Long list, not limited in height.
Custom placeholder. Text "-- Select --" set in attr placeholder.
placeholder
Empty List. Text "-- Select --" set in attr placeholder.
Grouped select (uses tag optgroup), one option innactive.
optgroup
Select with groups of different colors (classes .color1 and .color2 for optgroup).
.color1
.color2
We show that the select is changed using the class .changed (a green stroke appears).
.changed
The class specified for option, is transmitted to the folded select, so that we see the flag in it.
option
Tested change event: onchange="alert(this.value)".
onchange="alert(this.value)"
Search from ajax.
ajax
Select with parameter size equal to 6 and with a given width (400px).
size
6
Select with parameter size equal to 4 and without a given width
4
MultiSelect, one option innactive, attribute size not specified.
MultiSelect with parameter size equal to 6 and with a given width (400px).
Grouped MultiSelect (uses tag optgroup), one option innactive.
Grouped MultiSelect with the selection of groups different colors (classes .color1 and .color2 for optgroup).
Styling using only CSS.
<input type="text">
<textarea></textarea>
<input type="password">
<input type="search">
<input type="tel">
<input type="url">
<input type="date">
<input type="time">
<input type="color">
<input type="range">
<input type="reset">
<input type="button">
<button></button>
<input type="button" disabled>
<button disabled></button>