Adjusting the dropdown chevron icon in a standard selec...

At a glance

A community member is using the Select 2 UI component in a form, but the options in the dropdown are links, making the form unusable. They wanted to use a standard select form field, but couldn't figure out how to adjust the dropdown chevron icon. Another community member suggested two solutions: 1) using Finsweet Attributes to create a custom-looking form select, or 2) using custom CSS to remove the default icon and add a chevron icon as a background image. The original poster found a solution using the standard select element, removing the default icon with CSS, adding a div to wrap a chevron icon, and positioning it. This solution was tested and found to be responsive. The community members discussed the pros and cons of the different approaches, and the original poster ultimately switched to the background image method suggested by the other community member.

SSam

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

7 comments

CCatalina Clarino

CC:

MMatt Johnson

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.

SSam

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!

MMatt Johnson

nice! Have you tested that on mobile devices and what not then as well or?

SSam

, yes it's completely responsive. Took me a while, trying various methods but most of them would break at different breakpoints.

MMatt Johnson

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

SSam

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!

Add a reply

Community forum for knowledge and support

Adjusting the dropdown chevron icon in a standard select form field