HTML
导入代码模板:
Example:
-- our custom select --
My first option
Lorem ipsum
A slightly longer option than the rest
Fourth option
Custom Select (dropdown) Using CSS
Create a custom looking select box using CSS only. The dropdown part (options) of the select remains the same as native dropdown style (recommended).
How it works
- Removes all styles from
select
tag - Hides
select
dropdown arrow (except IE9) - Style
div.custom-select
which wraps theselect
- Uses psuedo element to add CSS arrow
- Add padding to
select
to ensure text doesn't run under arrow
Based off https://jsbin.com/yaruh/49/edit
Works in:
- Chrome
- Firefox
- Safari
- IE9+ (uses native dropdown decoration)
Result
Our Custom select:
-- select --
My first option
Lorem ipsum
A slightly longer option than the rest
Fourth option
disabled
My first option
Lorem ipsum
A slightly longer option than the rest
Fourth option
You would need some Javascript to enable/disable the custom select tag, AND the select
Native select for comparison:
Volvo
Saab
Mercedes
Audi