Changing HTML <select> tag's default arrow - HTML CSS CSS Form

HTML CSS examples for CSS Form:input select

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input select

Description

Changing HTML <select> tag's default arrow

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
  <style>

.container{<!--from   ww w.jav  a 2  s.co m-->
   position: absolute;
   width: 150px;
}
select {
   -webkit-appearance: none;
   -moz-appearance: none;
   text-indent: 1px;
   text-overflow: '';
   width: 100%;
   height: 20px;
   font-size: 15px;
   position: absolute;
   opacity: 0.5;
}
.set{
   position: absolute;
   left: 85%;
}

      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <i class="fa fa-angle-down set"></i> 
   <select class="myselect"> <option>All &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option> <option>First Option</option> <option>Second Option</option> </select> 
  </div>  
 </body>
</html>

Related Tutorials