NEED CSS SHORT HELP
Can Anyone help me that how can I change this default icon of <Select> html element by css. I am new to css so I am practicing. Thank you.
10 Replies
You'll want to
appearance: none the drop-down and then add your own in its place. You can use the :focus selector if you want to change the arrow when the list is openI don't understand if I do Appearance none to <select> then dropdown arrow of default will be removed but by using :focus how will i add new dropdown icon that will do work of default
@zed_dash
You can use pseudo-elements
:before and :after you can either turn them into the arrow or use them to display an imagedo you have any source code or youtube link
I'll make a minimal example
Ok Thanks i will be waiting
Ah I forgot select doesn't support pseudo-elements so it requires a little workaround
https://codepen.io/z-/pen/XWxZaRv/afa88399be36aa3743faa6d1a35a750a?editors=1100
Forgot there's no reliable way to determine if a dropdown is open using just CSS
The alternative to provide full control while being accessible is to emulate a dropdown by using a list of radio buttons
Okay Thanks, So much.