#Personaliser un select css3 #http://julian.com/research/css/main.css input, select { -webkit-appearance: none; -moz-appearance: none; border-radius: 0; background-color: #ededed; /* Note: No support for <IE9. */ background-color: #f3f3f3; background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#ebebeb)); /* Chrome, Safari 4+ */ background: -webkit-linear-gradient(top, #f3f3f3, #ebebeb); /* Chrome 10-25, iOS 5+, Safari 5.1+ */ background: -moz-linear-gradient(top, #f3f3f3, #ebebeb); /* Firefox 3.6-15 */ background: -o-linear-gradient(top, #f3f3f3, #ebebeb); /* Opera 11.10-12.00 */ background: linear-gradient(to bottom, #f3f3f3, #ebebeb); /* W3C Markup, Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */ -webkit-box-shadow: inset 0px 0px 0px 1px #f3f3f3; -moz-box-shadow: inset 0px 0px 0px 1px #f3f3f3; -o-box-shadow: inset 0px 0px 0px 1px #f3f3f3; box-shadow: inset 0px 0px 0px 1px #f3f3f3; border: 1px solid #bdbec6; font-weight: 600 !important; /* !important fixes an <=IE8 bug. */ font-size: 0.675em; font-weight: 300\9; *line-height: 1.4; *overflow: visible; *padding: 0.375em 0.65em 0.35em 0.65em; } input:hover, select:hover { box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05); /* Note: No support for <IE9. */ background-color: #3e9cfd; background: -webkit-gradient(linear, left top, left bottom, from(#3e9cfd), to(#4599ea)); /* Chrome, Safari 4+ */ background: -webkit-linear-gradient(top, #3e9cfd, #4599ea); /* Chrome 10-25, iOS 5+, Safari 5.1+ */ background: -moz-linear-gradient(top, #3e9cfd, #4599ea); /* Firefox 3.6-15 */ background: -o-linear-gradient(top, #3e9cfd, #4599ea); /* Opera 11.10-12.00 */ background: linear-gradient(to bottom, #3e9cfd, #4599ea); /* W3C Markup, Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */ border-color: #2e8fec; color: #f9f9f9; } select:active { box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 50, 0.115); border-color: #2678c6; color: #f1f1f1; }