Styling Select

[medicomhealth]

Hi Jason,

I’m trying to style the ‘select’ input in jumpstart. I’m actually using this in ‘contact form 7’ and I’ve added the class ‘orange’ to the select. It works, however there is a ‘sheen’ element (along with the vertical divider and arrows) applied that I can’t find in my inspector that I’d like to modify or get rid of. I can’t seem to find where this is getting added. Can you point me in the right direction?

I love this framework and can’t give enough kudos!

Thanks,
Isaac

Topic

[Jason Bobich]

Hello Isaac,

Styling a <select> can be tricky because all web browsers render them differently, and apply those styles in a slightly different way.

It works, however there is a ‘sheen’ element (along with the vertical divider and arrows) applied that I can’t find in my inspector that I’d like to modify or get rid of.

Apologies, I’m not quite sure what you mean by this. Can you provide a link to the issue so I can check it out?

[karlo]

You can see it here http://php.quicoto.com/how-to-style-a-select-dropdown-with-css/ is correctly called shit element if its the one I think about.

He make good attempt to CSS style, he ripped code from Bootstrap. I have seen prettier but then also more experimental. This even works in IE8. And no issues in Firefox. IE10 is weird, as if box gets centered around the arrow, does not drop properly. However I think this is just IE10 normal way. Try search CodePen for other attempts http://codepen.io/ Some will include jQuery, bleeding edge CSS and what not. Is not easy.

If not good enough, not cross browser enough, then jQuery! EasyDropDown http://patrickkunka.github.io/easydropdown/ is simple. I have used jQuery SelectBoxIt http://gregfranko.com/jquery.selectBoxIt.js/ which has full Bootstrap support.

Very tricky and I had to look for hours. One of the issues is what both those scripts does, “Degradation to native UI on touch devices”. Some do not because browser sniffing is a big no, even native JS apparently (purists!) – which means other people complain over select not being “native”. And then you have the fun fact that not all “touch” devices are actually mobile units. Hopeless, but those 2 work.

Ok IE8 being fine with this are big words http://imgur.com/998vCHF but could be a lot worse, and you can probably fine tune via Jump Starts body class for IE8.

[karlo]

Hmm, Firefox.. http://imgur.com/l9Yehvd look at left border. Still not bad. In Chrome border is ok and padding kicks in. Does not in Firefox. May be google “100% working CSS styling of select element” 😉

One more I considered, Bootstrap-select http://silviomoreto.github.io/bootstrap-select/ popular and updated. See GitHub.

[medicomhealth]

Hi guys.

I’m guessing this is a bootstrap thing. Jason here is a form I’m experimenting with this on:

http://162.243.0.117/astrology-reading-request/

They aren’t bad the way they are – at least with applying the ‘orange’ class – but I was trying to get rid of the gloss. I think Karlo’s example shows this same thing in grey. Probably not worth messing with too much but I’d still like to know how and where it is getting added. Again, probably from bootstrap?

Update:
And I wasn’t very clear either in that I’m talking about the control and not the list itself. But in looking at bootstrap (even though it is version 3 now) they have the same glossy overlay so it must be something they are adding in – I was just trying to figure out how.

Thanks,
Isaac

[Jason Bobich]

Are you viewing this in Google Chrome or Safari? I think the “gloss” you’re seeing is just the default look that the browser gives the <select>. I don’t believe you can override it. Take the link @karlo provide as an example:

http://php.quicoto.com/how-to-style-a-select-dropdown-with-css/

I’m viewing the above page in Google Chrome and applying only an orange background color with my inspector. Notice how you see that the same gloss look both with the completely un-styled <select> and the styled one when I apply background color that isn’t the default white. This is always there, but just is much more subtle against a white background (or whatever the browser default is):

Notice how your form looks in Firefox:

And Chrome:

And Safari:

You can apply basic styling to the <select>, but they are all going to be different in different browsers. It’s essentially impossible to get them looking consistent and nice. This is why @karlo is pointing you to the jQuery plugins; most people end up using this sort of “replacement” javascript approach when requiring complete control over a <select> menu.

For example, checkout Jump Start’s Theme Options page. It’s a custom thing I wrote, but this is essentially what I do for the select menus:

I have a little DIV setup that is styled exactly the way I want displaying text inside, and the actual select menu placed absolute on top, set to 0 opacity (i.e. transparent). Then when the user clicks the select menu and makes a change, a little piece of javascript changes the text value in the simulated menu.

[karlo]

And you are on Mac. Looks so pretty! Another thing to research. I think some of this styling could be depending on OS as well. Or browser vs. OS. Only conclusion that make sense is to override with jQuery.

Possible there are tiny scripts only doing what you want, no need for overkill, http://www.unheap.com/?s=select show some. Your page warrants extra script I think – can make it load only on that page if worried about performance. Clear visual and possibly also usability impact = worth it.

Found http://formalize.me/ which seem to be a no fluff what so ever solution.

We’ve all been there. You are nearly done with a beautiful site design, only to arrive at the task we all dread – form styling. Depending on operating system and browser, default form elements can look okay or horribly disfigured.

Cargo cult adherents say that styling form elements is evil, so we live with browser oddities. It does not have to be this way. It can be much better…

Look at the names going “Awwww”, some of biggest heads in web dev. – must be very good then. Is not just select elements, all native elements can be funky. One of the reasons it is wise for a theme dev. to marry a framework 🙂 Better off than without. You can fiddle with colors, much more and you need help.

Formalize also struggle, https://github.com/nathansmith/formalize/issues/65 yeah “hope”

[Author]

Replies