Select arrow style change
Working with just one class:
select {
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 5px;
height: 34px;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 244px;
}
http://jsfiddle.net/qhCsJ/4120/
I have set up a select
with a custom arrow similar to Julio's answer, however it doesn't have a set width and uses an svg
as a background image. (arrow_drop_down
from material-ui icons)
select {
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 5px;
border: 1px solid #dfdfdf;
border-radius: 2px;
margin-right: 2rem;
padding: 1rem;
padding-right: 2rem;
}
If you need it to also work in IE update the svg arrow to base64 and add the following:
select::-ms-expand { display: none; }
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
To make it easier to size and space the arrow, use this svg:
url("data:image/svg+xml,<svg width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>");
It doesn't have any spacing on the arrow's sides.
Have you tried something like this:
.styled-select select {
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none;
}
Haven't tested, but should work.
EDIT: It looks like Firefox doesn't support this feature up until version 35 (read more here)
There is a workaround here, take a look at jsfiddle
on that post.
Here is an elegant fix that uses a span to show the value.
Layout is like this:
<div class="selectDiv">
<span class="selectDefault"></span>
<select name="txtCountry" class="selectBox">
<option class="defualt-text">-- Select Country --</option>
<option value="1">Abkhazia</option>
<option value="2">Afghanistan</option>
</select>
</div>
JsFiddle