https://github.com/codeboxrcodehub/selectcustomicon
Custom dropdown icon/arrow for select/dropdown
https://github.com/codeboxrcodehub/selectcustomicon
css dropdown html select
Last synced: 11 months ago
JSON representation
Custom dropdown icon/arrow for select/dropdown
- Host: GitHub
- URL: https://github.com/codeboxrcodehub/selectcustomicon
- Owner: codeboxrcodehub
- Created: 2022-06-14T06:28:47.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-20T09:25:08.000Z (over 3 years ago)
- Last Synced: 2025-01-13T20:43:36.530Z (about 1 year ago)
- Topics: css, dropdown, html, select
- Language: HTML
- Homepage: https://codeboxr.com
- Size: 8.79 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Custom dropdown arrow/icon for select/dropdown in html
The dropdown arrow/icon in select/dropdown html comes from browser's standard style. This repository will to implement a custom icon/arrow for the dropdown/select.
## Demo
[View demo](https://codeboxrcodehub.github.io/selectcustomicon/index.html)
## Usage
# html
```
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
```
# css
```
/*remove default down arrow*/
select {
-webkit-appearance: none;
-moz-appearance: none;
}
/*basic style*/
select {
width: 100%;
padding: 1rem;
border-radius: 0.5rem;
z-index: 1;
background-color: transparent;
position: relative;
}
.custom-select-arrow-wrap {
position: relative;
}
.custom-select-arrow:before {
font-family: "Font Awesome 6 Free";
content: "\f107";
z-index: 0;
line-height: 2;
font-weight: 900;
color: #fff;
background-color: #153E5D;
width: 2rem;
height: 2rem;
border-radius: 0.5rem;
position: absolute;
top: 0.45rem;
right: 1rem;
text-align: center;
}
```
## Contributing
Contributions to this repo will be appreciated.
## License
This repository codes are licensed under the [MIT License](http://opensource.org/licenses/MIT).
Copyright 2022 [Codeboxr](https://codeboxr.com)