How to style a select only with Javascript without Jquery?

Here is a suggestion that uses an HTML structure with a hidden but select select that is changed depending on which custom select is changed.

I have also made another version more class-style and allowing 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: link

Switching directly to select I think is not possible. But what you can do is turn that into a table and from there configure it to behave like 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 JSFiddle

Reference: Custom Drop-Down List Styling

While finding the example of "Sergio" the ideal, here is 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: link