1

I have a dropdown menu using react-bootstrap as in the CodeSandbox

I would like to style the dropdown menu to look similar to the picture below enter image description here

Tenz
  • 535
  • 2
  • 7
  • 27
  • 1
    https://stackoverflow.com/questions/1895476/how-do-i-style-a-select-dropdown-with-only-css , https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element – vee Apr 11 '22 at 18:58
  • You should search on the web before asking here!! or try to find on youtube there a lot of tutorials. Take a look at this [video](https://www.youtube.com/watch?v=IXFoH5XAwBg) – Pedam Apr 11 '22 at 19:11
  • you can try this. https://codepen.io/CrystalRcodes/pen/BamPEJo and play with it – Crystal Apr 11 '22 at 19:23
  • @Tenz, are you using react-bootstrap? Because in your post I see a usual select element – Igor Gonak Apr 12 '22 at 06:20
  • @IgorGonak yes, I use react-boostrap. I am trying to change the popup window. I tried others' suggestions but still cannot get it as expected. – Tenz Apr 14 '22 at 17:36
  • What exactly is on your image? Is "test1" currently selected? Why it is not in the list? Why is there vertical space around "value3"? Is the green border around select input AND the dropdown? – Igor Gonak Apr 14 '22 at 18:43
  • @IgorGonak Test 3 is highlighted when it is hovered. Test 1 is the first option in the select menu. When clicking into the dropdown menu, it shows the list "test 1, test 2, test 3..." Hover over any of the options that will highlight it (as of test 3 is highlighted when hovered". – Tenz Apr 14 '22 at 19:57
  • @IgorGonak I have the CodeSandbox up and you can see what I mean. I just want to know how to style/ change the dropdown menu color, border, and highlighted color instead of the original color https://codesandbox.io/s/great-buck-lyqd22 – Tenz Apr 14 '22 at 19:59
  • no, I can't see any related code in your sandbox. it's just the standard one when you create it, without any additional code. What do you mean by "highlighted" color? active?hover? – Igor Gonak Apr 14 '22 at 20:26
  • vee and Crystal provided you with useful answers. What are you missing? We won't just right 100% code that you wish. You have to read, understand and do it yourself. Especially when you ask general questions and not specific one. Please read the accepted answer in this post carefully and make your conclusions: https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element – Igor Gonak Apr 14 '22 at 20:30
  • Does this answer your question? [How to style the option of an html "select" element?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element) – Igor Gonak Apr 14 '22 at 20:33

0 Answers0