CSS Open Select Box

by Said Suleiman Juma

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="sorting">
<div class="sort right"><label>
<span>Items per page</span>
    <select>
    <option value="">Items per page</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="40">40</option>
    <option value="60">60</option>
    <option value="100">100</option>
    <option value="200">200</option>
    </select>
    
    <span class="pointer"><i class="fa fa-caret-down"></i></span>
    </label>
    </div>
    </div>

CSS

select{
  -webkit-appearance:none;
    appearance:none;
      -moz-appearance:none;
}
.sorting{
	padding:5px 10px;
	border:1px solid #eee;
	clear:both;
  background:#FFF;
  height:40px;
}
.sorting h4{
	padding:4px 0 0;
	margin:0;
}
.sort{
	position:relative;	
	padding-left:10px;
  float:left;
}
.sort>label{
	font-weight:normal !important
}
.sort span.pointer{
	height:30px;
	width:30px;
	border-left:1px solid #ddd;
	position:absolute;
	right:0;
	top:0;
	text-align:center;
	color:#c49633;
	font-size:20px;
	z-index:1;
}
.sort span.pointer i{
	margin-top:6px;
}
.sorting select{
	padding:5px 40px 5px 10px !important;
	margin-left:10px;
	border:1px solid #eee;
	background:none;
	height:30px;
	position:relative;
	z-index:2;
}