Customized select menu button only using html and css

Customized select menu button only using html and css

3 min. read

HTML markup

<form id="sm_cvr">
	<input type="checkbox" id="vw_btn">
	<label id="slb1" tabindex="0" role="button"><div id="d_arr"></div></label>
	<div id="_op1">
		<input type="radio" name="op1" checked="checked" id="_1d1" value="">
		<input type="radio" name="op1" id="_1d2" value="Javascript">
		<input type="radio" name="op1" id="_1d3" value="PHP">
		<div id="_lbs">
			<label class="_op1"><div class="l_cr" id="so1">Select an option</div></label>
			<label class="_op1"><div class="l_cr" id="so2">Javascript</div></label>
			<label class="_op1"><div class="l_cr" id="so3">PHP</div></label>
		</div>
		<div class="v_op"></div>
	</div>
</form>

CSS rules

body
{
	margin:0px;
	font-family:Nunito;
}

h1
{
	text-align:center;
	padding-top:30px;
	color:#F44336;
}

#sm_cvr
{
	width:300px;
	margin:0 auto;
	color: #fff;
	font-size: 14px;
	position:relative;
	margin-bottom:0px;
}

label
{
	display:block;
}

#slb1
{
	height:19px;
	padding:10px 15px;
	position:relative;
	outline:none;
}

#vw_btn
{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:39px;
	margin:0px;
	opacity:0;
	cursor:pointer;
	z-index:1;
}

#vw_btn:checked ~ #slb1 #d_arr
{
	border-top-color:transparent;
	border-bottom-color:#af2c22;
	margin-top: -9px;
}

#vw_btn:checked ~ #_op1 #_lbs,#vw_btn:checked ~ #_op1 input[type="radio"]
{
	display:block;
}

#vw_btn:checked ~ #_op1
{
	padding-top:6px;
}

#d_arr
{
	position: absolute;
	top: 50%;
	margin-top: -3px;
	right: 15px;
	width: 0px;
	height: 0px;
	border: 6px solid transparent;
	border-top-color: #fff;
	z-index:3;
}

#_op1
{
	position: absolute;
	top: 39px;
	left: 0px;
	right: 0px;
}

._op1
{
	position:relative;
	height:19px;
	padding:6px 12px;
}
	
.l_cr,#_op1 input[type="radio"]
{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 100%;
}
	
#_op1 input[type="radio"]
{
	top:6px;
	margin: 0px;
	width:100%;
	height:31px;
	cursor: pointer;
	opacity:0;
	z-index:1;
	display:none;
}
	
#_op1 #_1d2
{
	top:37px;
}

#_op1 #_1d3
{
	top:68px;
}

#_lbs
{
	background-color: #F44336;
	padding:6px 0px;
	margin-top: -6px;
	display:none;
}

.l_cr
{
	height:19px;
	padding:6px 12px;
}

#_1d1:hover ~ #_lbs ._op1 #so1,#_1d2:hover ~ #_lbs ._op1 #so2,#_1d3:hover ~ #_lbs ._op1 #so3
{
	background-color:#ea3b2e;
}

#_1d1:checked ~ #_lbs ._op1 #so1,#_1d2:checked ~ #_lbs ._op1 #so2,#_1d3:checked ~ #_lbs ._op1 #so3
{
	background-color: #da382c;
}

.v_op
{
	position: absolute;
	top: -39px;
	left: 0px;
	right: 0px;
	padding: 10px 12px;
	background-color:#da382c;
}
	
#_1d1:checked ~ .v_op:before 
{
	content:'Select an option';
}

#_1d2:checked ~ .v_op:before 
{
	content:'Javascript';
}

#_1d3:checked ~ .v_op:before 
{
	content:'PHP';
}

Check out the fiddle below

Write comments