How to add arrow to select?

Question

I am trying to restyle Select box. Want to add a CSS arrow (looks nice when zooming the page), which would rotate as the Select box would expand, but I am not able to align the arrow properly according to the Select box. Tried to use some code from the internet, but it doesn't work for me. Also can't make the arrow rotate down when Select box expands.

Question:

1. How to align the arrow properly?

2. How to make it rotate down on user's click on the Select box?

Here is a fiddle: http://jsfiddle.net/QYtaS/ As you can see, the arrow absolutely flew out 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;
}

Solution

Here is your answer at jsfiddle: http://jsfiddle.net/ry7ykesy/3/

I have made one change in the html structure that you have provided.

/* This is JAVASCRIPT code */

/* This click event to add class "open" to "custom-selectbox" */
$('.custom-selectbox #day').on('click', function( e ) {
   $(this).parent().toggleClass("open");
   return false;
});
/* This click event on document to detect outside click */
$(document).on('click', function(e) {
	var $selectBoxContainer = $('.custom-selectbox');
	if($selectBoxContainer.hasClass('open')){
		$selectBoxContainer.removeClass('open');
	}
	else{
		return false;
	}
});

/* This is CSS code */

select {
	width: 150px;
	background-color: #FFFEFD;
	border: solid 1px #F15922;
	color: #000;
	outline: none;
	display: inline-block;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	height: 20px;
	padding-right: 20px;
}
.custom-selectbox{
	position: relative;
	display: inline-block;
}
.custom-selectbox:after{
	content: " ";
	height: 0;
	width: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #F15922;
	position: absolute;
	right: 6px;
	top: 8px;
	transition: all 0.3s linear;
}
.custom-selectbox.open:after{
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

<!-- This is HTML Code -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-selectbox">
	<select name="day" id="day" required="required">
		<option>-select-</option>
		<option value="1">1</option>
		<option value="2">2</option>
	</select>
</div>