Hi all,
I'm using the Select 2 UI component in my project as part of a form. The only issue is, is that when you select one of the options in the dropdown, nothing happens, as the options are links. Using this in a form is then completely useless. Am I missing something?
I wanted to use a standard select form field, but couldn't work out how to adjust the dropdown chevron icon, as it looks terrible stuck to the edge of the form field. Does anyone know if this is possible?
Thanks
couple of things - 1) if you hover over this icon, it links out to Finsweet Attributes. That is one way to make a custom looking form select. 2) the other way is to use this custom CSS, and then put a chevron icon as a background image and position it to the far right 98%.
<style> /*Reset apple form styles*/ input, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; background-image: none; } </style>If you put this custom code in the head of your site settings it'll still show up in designer but will look much better in the published URL.
Hi , thanks for your detailed response. Didn't see the link to Finsweet Attributes. I actually found a way to do this using the standard select element. I removed the default icon with CSS, added a div to wrap a chevron icon, set the div height to 100% with position absolute (relative to the select element) and moved it across 12px. I then set the div to flex and centre aligned the icon in the div. Worked perfectly!
, yes it's completely responsive. Took me a while, trying various methods but most of them would break at different breakpoints.
got it yeah. Glad you were able to figure out a solution. I think the solution I posted is a bit less complicated but if you are good with your solution, roll with it! Seems pretty solid.
If for some reason you do run into anyone reporting that they can't click on the menu, its likely because of this position: absolute; blocking the field - if that makes sense. But if you tested it on other devices/browsers etc and it works - then bingo! nicely done
Yes, I see the problem now with not being able to click on the chevron itself. Switched to your method with the background image. Thanks again for you help!