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;
}

Reiner

dont try to turn the standard select box around. really. depressing. build one your own out of a div using jquery. – Jurywoman

Which browsers do you need to support? If IE8 is in the mix, this is difficult. Personally I use a background image rather than :after – Woolgathering

Well, I would like to support at least Chrome, Mozilla and IE (newest vesions). I did the versin with background image, but I still need t turn it down and recolor to green. Any ideas at least to this solution? – Reiner

jsfiddle.net/QYtaS/3 – Limbate

Leave the poor select box alone. Your users will thank you. – Upstart

IE does not support that. Not even IE10. – Gyve

I agree with leaving poor select alone, as this will turn into a major challenge, even using flash would be a better option, but I still hate it. I would simply make a new control with JQuery and images, possibly a SVG if you are concerned about the raster image pixelation result upon zooming in, or just an ASCII character. – Cosma

Answer 1

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>

Vouchsafe

Answer 2

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;
    display:inline-block;
}
.arrow:after {
    content: '';
    font: 1em"Consolas", monospace;
    width: 0;
    height: 0;
    position: absolute;
    right: 3px;
    top: 1px;
    margin-right: 0;
    border-width: 8px 0 8px 8px;
    border-style: solid;
    border-color: transparent #F15922;
    pointer-events: none;
    transition: all 0.3s linear;
}

.arrow:before {
    content:'';
    right:6px;
    top:0px;
    width:20px;
    height:20px;
    position:absolute;
    pointer-events:none;
    display:block;
}

.arrow:focus-within:after {
    right: 6px;
    transform: rotate(90deg);
}

<div class="arrow">
    <select name="day" id="day" required="required">
        <option></option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div>

Thomasthomasa