How to style a select with Javascript only without Jquery?

Question

I know that the jQuery UI has the method selectmenu(), as it would be with pure Javascript ?

Not just the button select where will open the options, but also the window containing the options, including borders...

For example :

This window that contains the options, has a specific border for each browser, by what I’ve been reading, there is no direct access by css to this property, however it has to simulate, this with javascript... I’d like ideas on how to do this without jQuery..

Answer 1

Here’s a hint that uses an HTML structure with a native but hidden select and that changes depending on the custom select is changed.

I also made another more class-style version that allows multiple selects (example here).

var customSelect = document.querySelector('div.cs-select');
var select = customSelect.querySelector('select.cs-select');
var placeholder = customSelect.querySelector('.cs-placeholder');
var optionsHolder = customSelect.querySelector('.cs-options');
var options = [].slice.call(customSelect.querySelectorAll('.cs-options li'));

function chooseOption(e) {
    e.stopPropagation();
    select.value = this.dataset.value;
    placeholder.innerHTML = this.innerHTML;
	toggleSelect(e, true);
}
function toggleSelect(e, close) {
    e.stopPropagation();
    optionsHolder.classList.toggle('cs-hidden', close || this == window);
}

placeholder.addEventListener('click', toggleSelect, true);
window.addEventListener('click', toggleSelect);
options.forEach(function(el) {
    el.addEventListener('click', chooseOption, true);
});

.cs-select {
    width: 130px;
    height: 20px;
    position: relative;
    text-align: center;
}

.cs-options ul {
    position: absolute;
    left: 0;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.cs-select select {
    display: none;
}

.cs-placeholder {
    display: block;
}

.cs-placeholder,
.cs-options li {
    border: #cce 2px solid;
    width: 100%;
    padding: 5px;
	background-color: white;
	transition: background-color .4s;
}

.cs-placeholder:hover,
.cs-options li:hover {
    cursor: pointer;
    background-color: #fdd;
}

.cs-hidden {
    display: none;
}
.cs-placeholder:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 15px;
    width: 0;
    height: 0;
    border-top: 5px solid #999;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 5x solid transparent;
    margin-top: 0px;
}

<div class="cs-select">
    <span class="cs-placeholder">Twitter</span>
    <div class="cs-options cs-hidden">
        <ul>
            <li data-option="" data-value="email"><span>E-Mail</span></li>
            <li data-option="" data-value="twitter" class="cs-selected"><span>Twitter</span></li>
            <li data-option="" data-value="linkedin"><span>LinkedIn</span></li>
        </ul>
    </div>
    <select class="cs-select">
        <option value="" disabled="" selected="">Preferred contact method</option>
        <option value="email">E-Mail</option>
        <option value="twitter">Twitter</option>
        <option value="linkedin">LinkedIn</option>
    </select>
</div>

jsFiddle: https://jsfiddle.net/xuh1bgrp/1/

Answer 2

Switch directly on select I think is not possible. But what you can do is turn this into a table and, from it, configure it to behave as if it were this combobox.

HTML:

<div class="wrapper-demo">
        <div id="dd" class="wrapper-dropdown-3" tabindex="1">
            <span>Tabelinha</span>
            <ul class="dropdown">
                <li><a href="#">Seleção 1</a></li>
                <li><a href="#">Seleção 2</a></li>
                <li><a href="#">Seleção 3</a></li>
            </ul>
        </div>
    </div>

CSS:

*,
*:after,
*:before {
    padding: 0;
    margin: 0;
}

/* DEMO 3 */

.wrapper-dropdown-3 {
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 10px;

    border: 1px solid rgba(0,0,0,0.15);
    cursor: pointer;
    outline: none;
    font-weight: bold;
    color: #8AA8BD;
}

.wrapper-dropdown-3:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #8aa8bd transparent;
}

.wrapper-dropdown-3 .dropdown {
  /* Size & position */
    position: absolute;
    top: 140%;
    left: 0;
    right: 0;

    /* Styles */
    background: white;
    border-radius: inherit;
    border: 1px solid rgba(0,0,0,0.17);
    font-weight: normal;
    list-style: none;

    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

.wrapper-dropdown-3 .dropdown li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #8aa8bd;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
}

.wrapper-dropdown-3 .dropdown li i {
    float: right;
    color: inherit;
}

.wrapper-dropdown-3 .dropdown li:first-of-type a {
    border-radius: 7px 7px 0 0;
}

.wrapper-dropdown-3 .dropdown li:last-of-type a {
    border: none;
    border-radius: 0 0 7px 7px;
}

.wrapper-dropdown-3 .dropdown li:hover a {
    background: #f3f8f8;
}

.wrapper-dropdown-3.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

.wrapper-dropdown-3:focus .dropdown {
    opacity: 1;
    pointer-events: auto;
}

JS:

function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
    }
    DropDown.prototype = {
        initEvents : function() {
            var obj = this;

            obj.dd.on('click', function(event){
                $(this).toggleClass('active');
                return false;
            });

            obj.opts.on('click',function(){
                var opt = $(this);
                obj.val = opt.text();
                obj.index = opt.index();
                obj.placeholder.text(obj.val);
            });
        },
        getValue : function() {
            return this.val;
        },
        getIndex : function() {
            return this.index;
        }
    }

    $(function() {

        var dd = new DropDown( $('#dd') );

        $(document).click(function() {
            // all dropdowns
            $('.wrapper-dropdown-3').removeClass('active');
        });

    });

Code in the Jsfiddle

Reference: Custom Drop-Down List Styling

Answer 3

Although I find the @Sergio example ideal, follow a slightly simpler example:

select.custom-dropdown {
  /* Remove a borda */
  border: 0 !important;
  font-size: 14px;
  padding: 10px;
  width: 220px;
  cursor: pointer;
  background: #0d98e8 url(http://www.freeiconspng.com/uploads/blue-arrow-down-icon-png-27.png) no-repeat right center;
  background-size: 40px 37px;
  color: #fff;
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 5px;
  -webkit-appearance: none;
  /* Firefox 1-3.6 */
  -moz-border-radius: 5px;
  -moz-appearance: none;
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 5px;
  appearance: none;
}

<select class="custom-dropdown">
  <option value="" disabled="" selected="">Preferred contact method</option>
  <option value="email">E-Mail</option>
  <option value="twitter">Twitter</option>
  <option value="linkedin">LinkedIn</option>
</select>

Reference: http://www.kevinfremon.com/create-a-custom-drop-down-list-using-just-css/