
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure CSS Styled Select</title>
  <style>
    body {
      background-color: #e74c3c;
      font-family: 'Source Sans Pro', sans-serif;

    }
    .demo {
      margin: 100px auto;
    }

    .dropdown-container {
      width: 250px;
      margin: 100px auto;
      position: relative;
    }

    select {
      width: 100%;
      height: 50;
      font-size: 200%;
      font-weight: bold;
      cursor: pointer;
      border-radius: 0;
      background-color: #c0392b;
      border: none;
      border-bottom: 2px solid #962d22;
      color: white;
      appearance: none;
      padding: 10px;
      padding-right: 38px;
      -webkit-appearance: none;
      -moz-appearance: none;
      transition: color 0.3s ease, background-color 0.3s ease, border-bottom-color 0.3s ease;
    }

    /* For IE <= 11 */
    select::-ms-expand {
      display: none; 
    }

    .select-icon {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 30px;
      height: 36px;
      pointer-events: none;
      border: 2px solid #962d22;
      padding-left: 5px;
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    .select-icon svg.icon {
      transition: fill 0.3s ease;
      fill: white;
    }

    select:hover,
    select:focus {
      color: #c0392b;
      background-color: white;
      border-bottom-color: #DCDCDC;
    }
    select:hover ~ .select-icon,
    select:focus ~ .select-icon {
      background-color: white;
      border-color: #DCDCDC;
    }
    select:hover ~ .select-icon svg.icon,
    select:focus ~ .select-icon svg.icon {
      fill: #c0392b;
    }

  </style>
</head>
<body>
  <div class="demo">
    <div class="dropdown-container">
    <select name="nama_poli" id="antrian_poli"  class="form-control" onchange="loaddatadokter()">
                                        <option disabled selected> Pilih </option>
                                    </select> 
      <div class="select-icon">
      <div class="modal-footer">
                              
                            </div>
                           
        <svg focusable="false" viewBox="0 0 104 128" width="25" height="35" class="icon">
          <path d="m2e1 95a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0 1 9 9zm0-3e1a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0 1 9 9zm0-3e1a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0 1 9 9zm14 55h68v1e1h-68zm0-3e1h68v1e1h-68zm0-3e1h68v1e1h-68z"></path>
        </svg>
        
      </div>
    </div>
  </div>
</body>
</html>


