Select arrow no showing -webkit-appearance: none

HTML & CSS
1

Hi all

Most are probably aware of the below snippet, works very well.
The problem I’m having is that when viewing my select dropdowns on mobile/iphone in particular, the native safari styling is removed as expected, though the dropdown right hand side arrow is also removed. I would like to keep this arrow.

Does anybody know how, or what we can add to this declaration so the arrow stays?
Everything is ok on desktop.

select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;

Thanks, Barry

2

It’s not just mobile phone - all webkit and mozilla browsers (tbh any browser supporting that) will have the arrow disappear. Desktop, mobile, everything has this issue.

You could set a background arrow image on the select if you really do wanna go that route…?

3

Yes this is what I was trying to stay away from, isn’t there something we can add so the arrow stays?

Barry

4

If you’re going touse the appearence:none then no - that removes the default styling the browser gives. Which means the arrow is then gone as well.

5

Nevermind, looks like I’ll have to add a background image for mobile. Though, very surprised not a small snippet we can add to solve this… JS overkill.

Thanks for the knowledge!

6

I tend to use this method for more consistent styling.

It’s a little extra work but looks neater in modern browsers.

7

Great timing, I was, am, literally creating a transparent png for a background image, gave in :smile:

I already have the dropdown everything in place working good.
Just wondering, can I still use a background image, and what benefit your code has over something like:

background: url(../images/down-arrow.png) no-repeat right 12px

Known problems in certain browsers?
Ultimately, this is mainly for mobile as I can switch off appearance: none via media query, though FF looks quite ugly, haven’t checked any others. I’m also using parts of the bootstrap framework if that changes anything.

As things stand, without any arrows, the dropdown looks like a simple piece of text ha. Hoping to have this dropdown as a main feature at the top of the page, needs to be right.

Thanks, Barry

8

Here is my full code so far @PaulOB :

select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 278px;
  border-color: #444 #333 #333 #444!important;
  background: url(../images/down-arrow.png) no-repeat 254px 12px;
}

Which displays (image attached):

I don’t have IE using Mac locally. Do you see any problems with what I have?
Any room for improvement?

Thanks, Barry

9

In IE11 you will need the ms-expand rule to remove the arrow.

select ::-ms-expand {
 display:none;
}

Not sure about IE10 but that is almost dead anyway but for ie9 and below you will probably want CCs and remove any clever styling.

You should also define borders (not just colours) as some browsers will use double borders by default and also set a border-radius

The benefit of using the mitred border arrow is that you don’t need an image and you can of course change easily to any colour you want.

The example I posted is looking pretty consistent cross browser and PC mac and iphone. I dare say there will be some browsers that have an issue but they should be few and far between.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.