creating custom selectbox
Demo:
step1 : copy below code as selectbox.html
<html>
<head>
<style>
.selectParent{ width:180px; overflow:hidden; }
.selectParent select{ width:100px; -webkit-appearance: none; -moz-appearance: none; appearance: none;
padding: 2px 2px 2px 20px; border: none; background: lightblue url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat left center; }
</style>
<body>
<div class="selectParent">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</body>
</html>
step2 : view in browser
Demo:
<html>
<head>
<style>
.selectParent{ width:180px; overflow:hidden; }
.selectParent select{ width:100px; -webkit-appearance: none; -moz-appearance: none; appearance: none;
padding: 2px 2px 2px 20px; border: none; background: lightblue url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat left center; }
</style>
<body>
<div class="selectParent">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</body>
</html>
step2 : view in browser