A legkisebb mértékben sem támogatom a videóban ismertetett megoldások használatát, de sajnos néha rá vagyok kényszerülve.

Ha valakinek van jobb / egyszerűbb megoldása a SELECT elemeken belüli legördítő nyíl lecserélésre, kérem írja meg!

A JS alapja innen származik.

A működő kódot ide kattintva tudod megnézni.

Videó

HTML forráskód


	<h2>Default</h2>

	<select class="select1">
		<option>Válassz</option>
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
		<option>Option 4</option>
	</select>

	<br><br>

	<h2>JS nélkül</h2>

	<div class="select2">
		<select>
			<option>Válassz</option>
			<option>Option 1</option>
			<option>Option 2</option>
			<option>Option 3</option>
			<option>Option 4</option>
		</select>
	</div>


	<br><br>


	<h2>1 sor JS</h2>
	<div class="select3">
		<div>Válassz</div>
		<select>
			<option>Válassz</option>
			<option>Option 1</option>
			<option>Option 2</option>
			<option>Option 3</option>
			<option>Option 4</option>
		</select>
	</div>


	<br><br>

	<h2>Custom</h2>

	<select class="custom-select">
		<option value="">Válassz</option>
		<option value="opt1">Option 1</option>
		<option value="opt2">Option 2</option>
		<option value="opt3">Option 3</option>
		<option value="opt4">Option 4</option>
	</select>

CSS forráskód


.select1 {
	width:200px;
	border:1px solid #ccc;
	background:#fff;
	padding:5px;
	box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1)
}
.select2 {
	width:200px;
	display:inline-block;
	border:1px solid #ccc;
	position:relative;
	box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1)
}
.select2:before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:#fff;
	z-index:-1000
}
.select2:after {
	content:'';
	position:absolute;
	right:10px;
	top:40%;
	width:20px;
	height:10px;
	background:center center no-repeat url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSItMTYuMiA4Ny45IDQ4NC4yIDI3NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMTYuMiA4Ny45IDQ4NC4yIDI3NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjI1LjksMzM1LjFjLTYuOSwwLTEzLjctMi42LTE5LTcuOUw0Mi4yLDE2Mi41Yy0xMC41LTEwLjUtMTAuNS0yNy41LDAtMzcuOWMxMC41LTEwLjUsMjcuNS0xMC41LDM3LjksMGwxNDUuOCwxNDUuOA0KCWwxNDUuOC0xNDUuOGMxMC41LTEwLjUsMjcuNS0xMC41LDM3LjksMGMxMC41LDEwLjUsMTAuNSwyNy41LDAsMzcuOUwyNDQuOSwzMjcuM0MyMzkuNywzMzIuNSwyMzIuOCwzMzUuMSwyMjUuOSwzMzUuMXoiLz4NCjwvc3ZnPg0K');
	z-index:-2
}
.select2 select {
	background:transparent;
	margin-right:20px;
	-webkit-appearance:none;
	-moz-appearance:none;
	width:100%;
	padding:5px 20px 5px 5px;
	border:0
}
.select2 select::-ms-expand {
	display:none
}
.select3 {
	display:block;
	position:relative;
	padding:5px 10px;
	width:180px;
	border:1px solid #ccc;
	background:#fff;
	box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1)
}
.select3 select {
	position:absolute;
	right:0;
	top:0;
	opacity:0;
	width:100%;
	height:28px
}
.select3:before {
	content:'';
	position:absolute;
	right:10px;
	top:40%;
	width:20px;
	height:10px;
	background:center center no-repeat url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSItMTYuMiA4Ny45IDQ4NC4yIDI3NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMTYuMiA4Ny45IDQ4NC4yIDI3NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjI1LjksMzM1LjFjLTYuOSwwLTEzLjctMi42LTE5LTcuOUw0Mi4yLDE2Mi41Yy0xMC41LTEwLjUtMTAuNS0yNy41LDAtMzcuOWMxMC41LTEwLjUsMjcuNS0xMC41LDM3LjksMGwxNDUuOCwxNDUuOA0KCWwxNDUuOC0xNDUuOGMxMC41LTEwLjUsMjcuNS0xMC41LDM3LjksMGMxMC41LDEwLjUsMTAuNSwyNy41LDAsMzcuOUwyNDQuOSwzMjcuM0MyMzkuNywzMzIuNSwyMzIuOCwzMzUuMSwyMjUuOSwzMzUuMXoiLz4NCjwvc3ZnPg0K')
}
.select-outer {
	display:inline-block;
	width:200px;
	cursor:pointer;
	position:relative
}
.select-inner {
	display:block;
	position:relative;
	overflow:hidden;
	border:1px solid #ccc;
	background:#fff;
	padding:5px 10px;
	box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1)
}
.select-inner:after {
	content:'';
	position:absolute;
	right:10px;
	top:40%;
	width:20px;
	height:10px;
	background:center center no-repeat url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSItMTYuMiA4Ny45IDQ4NC4yIDI3NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMTYuMiA4Ny45IDQ4NC4yIDI3NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjI1LjksMzM1LjFjLTYuOSwwLTEzLjctMi42LTE5LTcuOUw0Mi4yLDE2Mi41Yy0xMC41LTEwLjUtMTAuNS0yNy41LDAtMzcuOWMxMC41LTEwLjUsMjcuNS0xMC41LDM3LjksMGwxNDUuOCwxNDUuOA0KCWwxNDUuOC0xNDUuOGMxMC41LTEwLjUsMjcuNS0xMC41LDM3LjksMGMxMC41LDEwLjUsMTAuNSwyNy41LDAsMzcuOUwyNDQuOSwzMjcuM0MyMzkuNywzMzIuNSwyMzIuOCwzMzUuMSwyMjUuOSwzMzUuMXoiLz4NCjwvc3ZnPg0K')
}
.select-inner:active,
.select-inner.active { background:#eee }

.options {
	display:none;
	background:#fff;
	position:absolute;
	left:0;
	right:0;
	z-index:100;
	list-style:none;
	border:1px solid #ccc;
	border-top:0
}
.options li {
	padding:5px 10px;
	border-bottom:1px solid #ccc
}
.options li:first-child { color:#b7b7b7 }
.options li:last-child { border:0 }
.options li:hover {
	background-color:#39f;
	color:#fff
}

JS forráskód



// source: http://jsfiddle.net/BB3JK/47/

$(document).ready(function(){

	$('.custom-select').each(function () {

		var $this = $(this), numberOfOptions = $(this).children('option').length;

		$this.hide();
		$this.wrap('<div class="select-outer"></div>');
		$this.after('<div class="select-inner"></div>');
		var $select = $this.next('div.select-inner');
		$select.text($this.children('option').eq(0).text());

		var $list = $('<ul>', { 'class': 'options'}).insertAfter($select);

		for (var i = 0; i < numberOfOptions; i++) {
			$('<li>', {
				text: $this.children('option').eq(i).text(),
				rel: $this.children('option').eq(i).val()
			}).appendTo($list);
		}

		var $listItems = $list.children('li');

		$select.click(function(e) {
			e.stopPropagation();
			$(this).toggleClass('active').next('ul.options').slideToggle("fast");
		});

		$listItems.click(function() {
			$select.text($(this).text()).removeClass('active');
			$this.val($(this).attr('rel'));
			$list.slideUp('fast');
			// alert($this.val());
		});

		$(document).click(function () {
			$select.removeClass('active');
			$list.slideUp('fast');
		});

	})


    $('.select3').change(function(){
        $(this).find('div').html($(this).find('option:checked').text());
    });

})