0

I am working on the mobile view of a website in which select input field is looking different in iphone 7 plus in comparison to other phones. I have created the sample fiddle https://jsfiddle.net/mng5yk8L/5/embedded/result

The HTML code which is being used to create the select input field box is:

<p>
    <input type="text" name="filter_29" id="search-box-filter_29" value="">
</p>

1st Screenshot:
The screenshot of the select input field boxes which I am seeing in the mobile view from my windows laptop in chrome browser is:

enter image description here


2nd Screenshot:
The screenshot of the content (which I don't want) which I am seeing from my Iphone 7 plus phone is:

enter image description here

Problem Statement:
I am wondering what changes I need to make in the css so that when I open the website in the mobile view from iphone 7 plus, it should look exactly the same as 1st screenshot.

john
  • 11,311
  • 40
  • 131
  • 251
  • Possible duplicate of [Turn off iPhone/Safari input element rounding](https://stackoverflow.com/questions/2918707/turn-off-iphone-safari-input-element-rounding) – Tamás Sengel Oct 21 '18 at 02:29

1 Answers1

1
select{-webkit-appearance: none;}

Adding that to any of the classes in your css should clear up any weird safari issues. I usually include it in my body selector of my CSS

Ari Patwary
  • 80
  • 1
  • 8
  • @AriPalwary Thanks. I used the same now and it worked. I have a similar [question](https://stackoverflow.com/questions/52909283/website-footer-content-not-visible-in-iphone-7-plus/52909808#52909808). I am wondering if you can give me a pointer. – john Oct 21 '18 at 14:30
  • @john Absolutely What is the question? – Ari Patwary Oct 22 '18 at 04:18