Dropdown Select Box with no 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

Dropdown Select Box with no 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">

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;<!--from  w w w .  j  a v  a  2 s. c o  m-->
}
.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(new_arrow.png) no-repeat right #fff;
}


      </style> 
 </head> 
 <body> 
  <div class="styled-select"> 
   <select> <option>first option</option> <option>The second option</option> </select> 
  </div>  
 </body>
</html>

Related Tutorials