Default Select Drop-Down List with just CSS

Customize html select box css it's very easy to make css for default html select tag, Take a look at the following tutorial about default css for html select dropdown list.


The HTML Markup

The css select box html as follows:

<form class="demo">
		<option>HTML </option>
		<option>HTML 5</option>
	<select class="balck">
		<option>HTML </option>
		<option>HTML 5</option>
	<select class="option3">
		<option>HTML </option>
		<option>HTML 5</option>


Fist We have to remove native css for select drop-menu so you have apply appearance: none; to select box The select box is css as follows:

	.demo select {
		border: 0 !important;  /*Removes border*/
		-webkit-appearance: none;  /*Removes default chrome and safari style*/
		-moz-appearance: none; /* Removes Default Firefox style*/
		background: #0088cc url(img/select-arrow.png) no-repeat 90% center;
		width: 100px; /*Width of select dropdown to give space for arrow image*/
		text-indent: 0.01px; /* Removes default arrow from firefox*/
		text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
		color: #FFF;
		border-radius: 15px;
		padding: 5px;
		box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
	.demo select.balck {
		background-color: #000;
	.demo select.option3 {
		border-radius: 10px 0;

A as far i tested this demo is working good in latest browser Of Firefox, Chrome, Safari, Opera etc... you can view and download the source code from the below links.

Try Your Self Download

  • Share
  • Copyright 2016 by All Rights Reserved.