Mérei Tamás webdesigner

Egyedi kinézetű SELECT készítése

Szerző:   |   2016-02-14

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

})

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

7 hozzászólás

  1. Pető László
    2016. december 28. szerda - 16:57

    A csak CSS-es selecthez annyit fűznék, hogy a :before elemet el lehet hagyni, ha a divre állítunk háttérszínt, az :after-re pedig teszünk egy pointer-events: none tulajdonságot.

    • cyrex
      2016. március 22. kedd - 23:06

      Néztem. Ugyanazok a workaround-ok amiket én is mutattam. Nincs rá jobb megoldás.

  2. Maximuse
    2016. február 29. hétfő - 23:32

    Ha egyedi select kell valamiért, akkor én ezt szoktam használni: https://github.com/harvesthq/chosen
    Elég jól bevált eddig, és nem is kell vele dolgozni pluszba. 😀

    • cyrex
      2016. március 1. kedd - 07:14

      Én is használom a chosen-t amikor szükség van rá. De, ha totál egyedi kinézetű select-et kapsz a grafikustól, ezzel sem mész semmire, mert ugyanúgy át kell írni az egészet.

  3. Gasparics Kristzián
    2016. február 18. csütörtök - 22:02

    Egyszer meggyűlt a bajom ezzel a megoldással nekem is. Az ügyfél ragaszkodott az egyedi select design-hoz.
    Az én megoldásom jóval egyszerűbb:

    HTML

    +36
    +XY

    CSS
    select#input-elem-phone {
    background-image: url(‘images/select-icon.png’);
    background-repeat: no-repeat;
    background-position: 70px 18px;
    width: 15%;
    height: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    padding: 6px;
    }
    .form-control {
    font-size: 14px;
    color: #555555;
    background-color: #ededed;
    }

    Minta: http://kepfeltoltes.hu/160218/phone_www.kepfeltoltes.hu_.jpg

    • cyrex
      2016. február 19. péntek - 16:49

      Ez is jó megoldás, csak a raszteres képeket már igyekszem elkerülni ahol csak lehet.

Hozzászólás

Legújabb hozzászólások