1

I am experiencing a problem with the height and border-radius of my select fields in iOS.

First, the border-radius. I already specified the border-radius for my select fields to be as the image below demonstrates:

enter image description here

For some reason, my border-radius settings are completely ignored on an iPhone. I'm not sure if the iPad produces the same result as I don't have one to test.

According to few posts like "Remove border radius from Select tag in bootstrap 3" The only solution I found was to set the border-radius to 0, but I want a border-radius. What shall I do?

Second, the height. The height of all selects are not matching to their height when viewing the site from a desktop browser. I set a min-height which helped but it's still under the required height.

What can it be that I am missing?

Note, the following CSS rules are applied to my select fields: 

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
Community
  • 1
  • 1
Leo
  • 967
  • 2
  • 14
  • 37
  • 2
    This will help you. Make sure your css rules fall in the correct order of importance...resets happening first, and then you can override them below. http://stackoverflow.com/questions/7599533/ios-forces-rounded-corners-and-glare-on-inputs – Alex Apr 29 '15 at 17:09
  • I have tried it but to no avail :/ – Leo Apr 29 '15 at 17:18
  • @Alex - just tried it again, I was missing something, it worked, it solved the height issue and nearly solved the border-radius issue. Will have a deeper look but thank you! This really helped. – Leo Apr 29 '15 at 17:32

0 Answers0