How to change the default drop-down box on iPhone

Your support helps keep this blog running! Secure payments via Paypal and Stripe.

When you are working on the responsive design. You want your design works well across all devices. Today I will share how to change the default dropdown box on the iPhone.

HTML

<select>
  <option value="Apple">Apple</option>
  <option value="Samsung">Samsung</option>
  <option value="Huawei">Huawei</option>
  <option value="Oppo">Oppo</option>
</select>

CSS

select{
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
   	 /* below you can add your style */
	height: 30px; 
	width: 100px;
	padding: 5px;
}

And that’s it.

tip:
My sample above, the drop-down box will have the arrow up and down which is in the background attribute. You can use your image and change it to base64 by b64.io.

Your support helps keep this blog running! Secure payments via Paypal and Stripe.