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

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ó

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

})