» » » How to change the default drop-down box on iPhone

How to change the default drop-down box on iPhone

posted in: Web Designer | 0
Follow by Email
Facebook
1 min read

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.

Follow by Email
Facebook