CSS selector

by slawe

HTML

<div id="yt_selector">
<select id="yt_up_category" name="category">
<option value="0" >Autos & Vehicles</option>
<option value="1">Comedy</option>
<option value="2">Education</option>
<option value="3">Entertainment</option>
<option value="4">Film & Animation</option>
<option value="5">Gaming</option>
<option value="6">Howto & Style</option>
<option value="7">Music</option>
<option value="8">News & Politics</option>
<option value="9">Nonprofits & Activism</option>
<option value="11" selected>People & Blogs</option>
<option value="7">Pets & Animals</option>
<option value="8">Science & Technology</option>
<option value="9">Sports</option>
<option value="10">Travel & Events</option>
</select>
</div>

CSS

#yt_selector {
   
width: 170px;
   height: 28px;
   overflow: hidden;
   background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
   border: red 1px solid;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
box-shadow: inset 0px 0px 10px 1px #FEFEFE;
   }
#yt_selector select {
  
   background: transparent;
   width: 170px;
   font-size:7pt;
   color:grey;
   border: 0;
   border-radius: 0;
   height: 28px;
   -webkit-appearance: none;
   
   }
   #yt_selector select:focus {
    outline: none;

}