How do I customize built-in browser default UI such as a dropdown?

Code Help HTML/CSS/JS
1

Question:
How do I customize built-in browser default UI such as a dropdown?

Example:

Screenshot 2023-08-29 161411
Screenshot 2023-08-29 1614111910Ă—923 29.3 KB

Repl link:
https://replit.com/@RedCoder/WorldCache?v=1

2 Likes
2

You can use CSS to change the default look, if you are using the default dropdown like:

<select id="thingy">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

then you can use the following css to change it:

#thingy{
  /*styles for the dropdown */
  background-color: #f2f2f2;
  color: #333;
  padding: 10px;
  border: none;
  border-radius: 4px;
}

#thingy option {
  /*styles for the dropdown options */
  background-color: #f2f2f2;
  color: #333;
  padding: 5px;
}

When you use a # in front of something in css it will apply to all things with that as the id. So the element <select> with an id of “thingy” is being targeted by the css in this case. In the case of #thingy option, it finds the element with the id of “thingy” and then applys the css to the nested element option. I hope this helps, if it does you can mark this answer as the solution to help others who may come across this problem.

1 Like