Styling A Select Box Using CSS3

Αντιγραφή επικόλληση τον παρακάτω κώδικα!


HTML code:

<div class="styled-select">
<select>
<option> Everything </option>
<option> Widgets </option>
<option> Tutorial </option>
<option> CSS3 </option>
<option> jQuery </option>
</select>
</div>

CSS code:

<style>
.styled-select {
width: 228px;
height: 34px;
overflow: hidden;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_EFEv_4LC8hcvXoMcYRjZH4gH0hwQenYjD3l6yPAsC_YmrsY_qvqDrZ6HKEsVGNVVGfE1z_RUfyCHw22pooeAAuK-DPlYyJjgMAmswb3kLHd-y_RCyvpQHl1FTFE86-0bCHXKJ2e_skw/s1600/Select.png) no-repeat ;
border-radius: 10px;
}
.styled-select select {
background: transparent;
width: 228px;
padding: 5px;
border: 1px solid #CCC;
font-size: 16px;
height: 34px;
font-weight: bold;
outline:0px;
-webkit-appearance: none;
border-radius: 10px;
}
.styled-select option {
background: lightgrey;
width: 228px;
padding: 5px;
border: 1px solid #CCC;
font-size: 16px;
height: 34px;
outline:0px;
-webkit-appearance: none;
}
</style>

Αν έχετε απορία για κάτι αφήστε το σχολειό σας και το συντομότερο θα σας δοθεί απάντηση.