You are viewing limited content. For full access, please sign in.

Question

Question

Drop-down Icon Styling

asked on September 26, 2018

Hey Everyone!

Just styling my form with some CSS and have it so all my input fields have nice and rounded edges.  I am just curious if anyone has had any luck with styling the drop down icon that is on the right hand side of drop-down fields?  Right now it's just looking like a square peg in a round hole. 

 

 

Thanks!

Drew

0 0

Replies

replied on September 26, 2018 Show version history

The rendering of some HTML controls is left up to the browser. That means that it will look different in each browser/platform on which you view it. It can get complicated to customize the appearance of the dropdown in a way that works consistently and across browsers. The dropdown button of select elements is one such control.

There is no single "right" way to do it. I hate to throw it back on you, but you'll have to do some searches along the lines of: style html select

Take a look at some of the results and pick a solution that works in your particular case.

1 1
replied on September 26, 2018

Thanks for the reply.  I will continue to do some research.  Was just curious if anyone else in the community had tried to do the same thing and if they could give me any pointers of how they were able to obtain the look they wanted.

0 0
replied on September 27, 2018 Show version history

Customizing the appearance of a select control isn't the hard part. Doing it in a way that works across browsers is where it gets tricky. Like I said above, select isn't directly style-able. The way it's normally done is to hide the original control and re-add elements that look how you want. The reason is that it's not possible to style the control directly in a way that is completely consistent across browsers.

In most applications, I use client libraries that look and behave like a customizable select control, but use a hidden select in the background so that they continue to function as a form element.

That being said, take a look at this fiddle. It's set up to work standalone, so you'll have to modify it to work in Forms. I can't guarantee that it will work across the range of browsers you are required to support, or the existing styles that you've written.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.