Set select's box transparent background - HTML CSS CSS Property

HTML CSS examples for CSS Property:background

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background

Description

Set select's box transparent background

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">

.outter_div {<!--from w ww. j  a va2  s .c  om-->
   display: table-cell;
   width: 400px;
   height: 200px;
   text-align: center;
   vertical-align: middle;
   background: url('https://www.java2s.com/style/demo/Opera.png');
}

.outter_div select {
   width: 200px;
   color: #fff;
   background-color: transparent;
   border: none;
   -webkit-appearance: none;
}

.outter_div option {
   color: #000;
   background-color: transparent;
   border: none;
}


      </style> 
 </head> 
 <body> 
  <div class="outter_div"> 
   <select> <option value="Option One">Option One</option> <option value="Option Two">Option Two</option> </select> 
  </div>  
 </body>
</html>

Related Tutorials