-webkit
prefixed properties are respected by Safari and Chrome only, for Firefox, you need to use -moz
prefix. When you use -webkit
, Firefox will just skip the property and will move ahead, thus it spoils your select
design.
Though, you can achieve the above with a lil hack, wrap your select
tag using a div
, assign fix width to your div
, and than use greater
width
for your select
tag. Now use background-image
for your select, and use overflow: hidden;
for the wrapper
div {
width: 200px;
border: 1px solid #f00;
overflow: hidden;
}
div select {
width: 220px;
background-image: url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/256/Download-icon.png);
background-size: 13px 13px;
background-repeat: no-repeat;
background-position: 180px 5px;
}
This way, the above will give you better cross browser compatibility, and you don't have to use prefixes
as well.