<!DOCTYPE html>
<html>
<head>
  <title>Create Custom Select Box Pure Css3</title>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  
    <div class='SelectBox'>
    <select>
      <option>Link 01</option>
      <option>Link 02</option>
      <option>Link 03</option>
      <option>Link 04</option>
    </select>
    <div class="chevron">
        <i class="far fa-chevron-circle-down"></i>
      </div>
    </div>


</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*, html,body{
  padding:0px;
  margin:0px;
  box-sizing:border-box;
  font-family:'Poppins', sans-serif;
  perspective:800px;
}
body{
  background-color:#20bf6b;
  width:100%;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
.SelectBox{
  position:relative;
}
.SelectBox select{
  width:300px;
  height:35px;
  background-color:#26de81;
  color:#fff;
  -webkit-appearance:none;
  box-shadow:0px 0px 10px rgba(0,0,0,.2);
  border:none;
  outline:none;
  padding-left:5px;
  font-size:17px;
  cursor:pointer;
}
.SelectBox .chevron{
  position:absolute;
  top:0px;
  right:0px;
  text-align:center;
  line-height:35px;
  width:30px;
  height:100%;
  background-color:#27ae60;
  pointer-events:none;
  color:#fff;
}
.SelectBox select option{
  background-color:#27ae60;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.