Select CSS

 

**** HTML

<select name="txt_quanhuyen" class="form-control my-box-shadow sl-district" required="">

<option value="">Quận/Huyện</option>

</select>

****CSS

.sl-district {

    background: url(../images/Icon-material-district.png) 8px 10px, url(../images/caret-select.png) right 20px bottom 14px;

    background-repeat: no-repeat;

    text-indent: 18px;

    appearance: none;  // không hiện dropdown truyền thống

}

.my-box-shadow {

    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 16%);

}

Select2

Link: tại đây

<head>
 <!-- stylesheets -->
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">


 <!-- scripts -->
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

 <script>
  $(function(){
   // turn the element to select2 select style
   $('.select2').select2({
   placeholder: "Select a state"
   });

   var data = $(".select2 option:selected").text();
   $("#test").val(data);
  });
 </script>
</head>

<body>

 <p>select2 select box:</p>
 <p>
 <select  class="select2" style="width:300px">
 <option> </option>
 <option value="AL">Alabama</option>
 <option value="VT">Vermont</option>
 <option value="VA">Virginia</option>
 <option value="WV">West Virginia</option>
 </select>
 </p>

 <input type="text" id="test">
</body>
</html>

Select HTML

<select onchange=\"window.open(this.options[this.selectedIndex].value,'_self')\">
<option value=\"file.php?op=shoping_user_level&id=$id&status=1">Normal</option>
<option value=\"file.php?op=shoping_user_level&id=$id&status=2">Basic</option>
<option value=\"file.php?op=shoping_user_level&id=$id&status=3">Standard</option>
<option value=\"file.php?op=shoping_user_level&id=$id&status=4">Premium</option>
</select>