article

Saturday, July 27, 2013

Style a Select Box Using CSS

Style a Select Box Using CSS
 
<style>
.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;
   }
   .styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(down_arrow_select.jpg) no-repeat right #ddd;
  
   display:block;font-size:16px;outline:0 none;padding:.4em;text-shadow:0 1px 0 #fff;-moz-border-radius:.6em;-webkit-border-radius:.6em;border-radius:.6em;border:1px solid #aaa;color:#333;text-shadow:0 1px 0 #fff;
   }
</style>
<div class="styled-select">
   <select>
      <option>Male</option>
      <option>Female</option>
   </select>
</div>

Related Post