CODEWITHSUNDEEP
htmlioscssiphonesafari
snecserc
snecserc

Reputation: 615

Style HTML select tag on ios/safari/iPhone

I have three dropdown lists (three <select> elements). I styled them with the css:

.dropdown{
    font-size: 20px;
    background: white;
    border:none;
    position: relative;
}

In chrome they look perfectly fine. However when I test the site on my iPhone 6s (ios 10.2.1) on Safari the result is a bit different as shown in the image: enter image description here

As you can see there's that gradient in background and near the arrow the background is black.

How can I style the <select> elements so I would have background white on ios either?

Upvotes: 9

Views: 46916

Answers (2)

snecserc
snecserc

Reputation: 615

As Stian Martinsen suggested -webkit-appearance: none; disable default styling of <select> tag, but it also hides the arrow. So I find a workaround with this code:

.dropdown{
 		font-size: 20px;
 		background: white;
 		border:none;
 		position: relative;
 		-webkit-appearance: none;
        padding-right: 10px;
 	}
 	.dropdown:focus{
 		outline: none;
 	}
 	.plain-selector{
 		margin: 0 3px;
 	}
 	.plain-selector::after{
	 	content: "";
	    position: absolute;
	    z-index: 2;
	    bottom: 30%;
	    margin-top: -3px;
	    height: 0;
	    width: 0;
	    right: 0;
	    border-top: 6px solid black;
	    border-left: 6px solid transparent;
	    border-right: 6px solid transparent;
	    pointer-events: none;
 	}
 	.plain-selector::before{
	 	content: "";
	    position: absolute;
	    z-index: 2;
	    top: 30%;
	    margin-top: -3px;
	    height: 0;
	    width: 0;
	    right: 0;
	    border-bottom: 6px solid black;
	    border-left: 6px solid transparent;
	    border-right: 6px solid transparent;
	    pointer-events: none;
 	}
 	.out-selector{
 		position: relative;
 	}
     .outter-selection{
     	width: 100%;
     }
     .selection{
   	display: block;
 	margin: auto;
 	border-radius: 50px;
 	background: white;
 	padding: 5px;
 	max-width: 360px;
 	text-align: center;
 	width: 90%;
 	position: relative;
 }
body{
 		margin-top: 4em;
 		background: #2f2f2f;
 		color: white;
 		font-size: 23px;
 	}
<div class="outter-selection">
	<div class="selection">
		<span class="out-selector"><span class="plain-selector"><select class="dropdown">
			<option value="1" selected="selected">select 1</option>
			<option value="2">select 2</option>
			<option value="3">select 3</option>
			<option value="4">select 4</option>
		</select></span></span>
		<span class="out-selector"><span class="plain-selector"><select class="dropdown">
            <option value="1" selected="selected">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
          </select></span></span>
		<span class="out-selector"><span class="plain-selector"><select class="dropdown">
            <option value="1" selected="selected">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
          </select></span></span>
	 </div>
 </div>

Upvotes: 5

Stian Martinsen
Stian Martinsen

Reputation: 654

Try adding this CSS to disable Ios' default styling:

-webkit-appearance: none;

This will also work on other elements that get special styling, like input[type=search].

Upvotes: 36

Related Questions