Styling SELECT Option tags with gradient and custom 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

Styling SELECT Option tags with gradient and custom arrow

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.selectParent{<!--from  w ww .j  a  v  a  2s.c  o m-->
   width:80px;
   overflow:hidden;
   background: blue;
   background: -moz-linear-gradient(top,  blue 0%,pink 24%, yellow 50%, brown 79%, grey 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,blue), color-stop(24%,#73b1e7), color-stop(50%,yellow), color-stop(79%,brown), color-stop(100%,grey));
   background: -webkit-linear-gradient(top,  blue 0%,#73b1e7 24%,yellow 50%,brown 79%,grey 100%);
   background: -o-linear-gradient(top,  blue 0%,#73b1e7 24%,yellow 50%,brown 79%,grey 100%);
   background: -ms-linear-gradient(top,  blue 0%,#73b1e7 24%,yellow 50%,brown 79%,grey 100%);
   background: linear-gradient(to bottom,  blue 0%,#73b1e7 24%,yellow 50%,brown 79%,grey 100%);
}
.selectParent select{
   width: 100px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   padding: 2px 2px 2px 2px;
   border: none;
   background: transparent url("https://www.java2s.com/style/demo/Safari.png") no-repeat 60px center;
}


      </style> 
 </head> 
 <body> 
  <div class="selectParent"> 
   <select> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> 
  </div>  
 </body>
</html>

Related Tutorials