DropKick.js
Examples you can use.
FOUC Solution Comparision:
Try Me!
Australia
Canada
Germany
Japan
United Kingdom
United States
Try Me!
Australia
Canada
Germany
Japan
United Kingdom
United States
Try Me!
Australia
Canada
Germany
Japan
United Kingdom
United States
The 1st select is wrapped with '.dk_wrap' but WITHOUT dropkick applied.
The 2nd select starts wrapped with .dk_wrap' and then dropkick is APPLIED.
The 3rd select doen NOT starts wrapped, but dropkick is APPLIED.
Reload the page to see the FOUC (Flash of Unstyled Content) again.
Default Options
Try Me!
Australia
Canada
Germany
Japan
United Kingdom
United States
Try Me, Too!
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
Try Me!
Australia
Canada
Germany
Japan
United Kingdom
United States
View JS
Custom 'change' callback
Please select a color
Blue
Orange
Brown
View JS
Creating custom themes
Pick a theme. Any theme
Default Theme
Dark Gloss
Light Gloss
View CSS
View JS
Label behaviour
I'm a <label> tag (click me!):
I'm the placeholder
I'm the first option \0/
I'm the second one ;-P
I'm the third :-(
Disabled <select>
Try Me!
Australia
Canada
Germany
Japan
United Kingdom
United States
Enable
Disabled <option>
Try Me!
Australia
Canada
Germany
Japan
United Kingdom
United States
All options disabled
Australia
Canada
Germany
Japan
United Kingdom
United States
With <optgroup>
Try optgroup support!
Canada
United States
Japan
Germany
United Kingdom
Australia