umerata
8/11/2017 - 10:13 AM

Custom Arrows on Select / Custom Dropdown Arrows | label-css

Custom Arrows on Select / Custom Dropdown Arrows

html.html
content_copyfile_download
div class="cust-sel cust-sel-1">
			<select>
					<option value="1">Lorem ipsum.</option>
					<option value="2">Sunt, nesciunt.</option>
					<option value="3">Repellendus, nostrum.</option>
			</select>
</div>
<br>
<div class="cust-sel cust-sel-2">
			<select>
					<option value="volvo">Volvo</option>
					<option value="saab">Saab</option>
					<option value="mercedes">Mercedes</option>
					<option value="audi">Audi</option>
			</select>
</div>
Example.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

	

	
.cust-sel{
  position: relative;
  display:block;

}

.cust-sel::after{
  content: '';
  position: absolute;
  top:0;
  bottom:0;
  margin:auto 0;
}
.cust-sel select{
  padding: 5px 20px 5px 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display:block;
  width:100%;
}
.cust-sel select::-ms-expand {
  display: none;
}

/* Types of Arrows */
.cust-sel-1::after{
  right: 8px;
  width: 0;
  height:0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #5591dc;
  pointer-events: none;
}
.cust-sel-2::after{
  right: 8px;
  height:7px;
  width:7px;
  border:2px solid #5591dc;
  border-left: none;
  border-top: none;
  background-color:transparent;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  transition: all 0.15s ease-in-out;
  border-radius:0 0 1px 0;
  pointer-events: none;
}

    </style>
</head>

<body>
    <div class="cust-sel cust-sel-1">
        <select>
            <option value="1">Lorem ipsum.</option>
            <option value="2">Sunt, nesciunt.</option>
            <option value="3">Repellendus, nostrum.</option>
        </select>
    </div>
    <br>
    <div class="cust-sel cust-sel-2">
        <select>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>
    </div>
</body>

</html>
Custom Arrows on Select.css
content_copyfile_download

.cust-sel{
  position: relative;
  display:block;

}

.cust-sel::after{
  content: '';
  position: absolute;
  top:0;
  bottom:0;
  margin:auto 0;
}
.cust-sel select{
  padding: 5px 20px 5px 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display:block;
  width:100%;
}
.cust-sel select::-ms-expand {
  display: none;
}

/* Types of Arrows */
.cust-sel-1::after{
  right: 8px;
  width: 0;
  height:0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #5591dc;
  pointer-events: none;
}
.cust-sel-2::after{
  right: 8px;
  height:7px;
  width:7px;
  border:2px solid #5591dc;
  border-left: none;
  border-top: none;
  background-color:transparent;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  transition: all 0.15s ease-in-out;
  border-radius:0 0 1px 0;
  pointer-events: none;
}