How to style a select with Javascript only without Jquery?

Asked

Viewed 759 times

4

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 :

inserir a descrição da imagem aqui

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..

  • What do you mean? You can give some example?

  • @Insanity added some more information, if you have any tips...

  • See if this helps: http://glauberramos.com/12-regras-css-poucos-conhecem.html

  • @Insanity well to tell the truth, in the context of what was asked, where it could help ?

3 answers

6


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/

  • 1

    Blz, Sergio that’s right... Vlw the force;)

  • @Magichat great I could help!

1

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

  • No jquery... But thanks for your attention... If you can, change jquery to pure js .... I think it’s enough... Vlw man ;)

0

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/

  • 1

    The only problem of using only css, is that you will not achieve the same standard for all browsers... I would like to understand, why to be able to style several parts of the control, less the edge of the optionList... You will know.... It was worth the attention man...

Browser other questions tagged

You are not signed in. Login or sign up in order to post.