I've been working on restyling a Select box and I want to add a CSS arrow that rotates as the Select box expands. However, I'm struggling to align the arrow properly with the Select box. I've tried using code from the internet, but it hasn't worked for me. Additionally, I can't figure out how to make the arrow rotate down when the user clicks on the Select box.
Question:
Any suggestions on how to properly align the arrow?
How can I make the arrow rotate downwards when the user interacts with the Select box?
Here is a fiddle: http://jsfiddle.net/QYtaS/ I'm facing an issue where the arrow seems to be positioned outside of the Select Box.
HTML:
<div class="arrow">
<select>
<option></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
CSS:
select {
width: 100px;
margin: 0;
background-color: #FFFEFD;
border: solid 1px #F15922;
color: #000;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
}
.arrow {
position:relative
}
.arrow:after {
content:'';
font: 1em"Consolas", monospace;
width: 0;
height: 0;
position: absolute;
right:8px;
top:50%;
padding: 0 0 -25% 0;
margin-right: 3px;
border-width: 8px 0 8px 8px;
border-style: solid;
border-color: transparent #F15922;
pointer-events:none;
}
.arrow:before {
content:'';
right:6px;
top:0px;
width:20px;
height:20px;
position:absolute;
pointer-events:none;
display:block;
}