Skip to main content

Return to Question

3
duplicates list edited from How to style the option of an HTML select element? to How do I style a <select> dropdown with only CSS?, How to style the option of an HTML select element?
Link
Temani Afif
Temani Afif
  • 280k
  • 30
  • 378
  • 503
Post Closed as "Duplicate" by Temani Afif css
deleted 23 characters in body
Source Link
CertainPerformance
CertainPerformance
  • 373.4k
  • 55
  • 354
  • 359

Happy Sunday everyone, I would like to know how to styling the select tags for this image below enter image description here

I was able to custom the dropdown (code below):

select { padding: 1em; width: 130%; border-radius: .2em; border: 1px solid #acacac; color: #181820; appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; background: url('https://cdn1.iconfinder.com/data/icons/arrows-vol-1-4/24/dropdown_arrow-512.png'); background-repeat: no-repeat; background-size: 15px 15px; background-position: right; background-origin: content-box; }

Happy Sunday everyone, I would like to know how to styling the select tags for this image below enter image description here

I was able to custom the dropdown (code below):

select { padding: 1em; width: 130%; border-radius: .2em; border: 1px solid #acacac; color: #181820; appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; background: url('https://cdn1.iconfinder.com/data/icons/arrows-vol-1-4/24/dropdown_arrow-512.png'); background-repeat: no-repeat; background-size: 15px 15px; background-position: right; background-origin: content-box; }

I would like to know how to styling the select tags for this image below enter image description here

I was able to custom the dropdown (code below):

select { padding: 1em; width: 130%; border-radius: .2em; border: 1px solid #acacac; color: #181820; appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; background: url('https://cdn1.iconfinder.com/data/icons/arrows-vol-1-4/24/dropdown_arrow-512.png'); background-repeat: no-repeat; background-size: 15px 15px; background-position: right; background-origin: content-box; }
Source Link
flyingduck92
flyingduck92
  • 1.7k
  • 4
  • 26
  • 49

Styling select tags using CSS

Happy Sunday everyone, I would like to know how to styling the select tags for this image below enter image description here

I was able to custom the dropdown (code below):

select { padding: 1em; width: 130%; border-radius: .2em; border: 1px solid #acacac; color: #181820; appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; background: url('https://cdn1.iconfinder.com/data/icons/arrows-vol-1-4/24/dropdown_arrow-512.png'); background-repeat: no-repeat; background-size: 15px 15px; background-position: right; background-origin: content-box; }