4

Sei que o jQuery UI possui o método selectmenu(), como seria com Javascript puro ?

Não apenas o botão select onde abrirá as opções, mas também a janela contendo as opções, incluindo bordas...

Por exemplo :

inserir a descrição da imagem aqui

Essa janela que contém as opções, tem uma borda específica para cada navegador, pelo que andei lendo, não há acesso direto pelo css a essa propriedade, entretanto tem como simular, isso com javascript... Eu gostaria de ideias de como fazer isso, sem jQuery..

4
  • Como assim? Pode dar algum exemplo?
    – Artur
    7/10/2016 às 18:52
  • @Insanity acrescentei mais algumas informações, se tiver alguma dica...
    – MagicHat
    7/10/2016 às 19:52
  • Vê se isso ajuda: glauberramos.com/12-regras-css-poucos-conhecem.html
    – Artur
    7/10/2016 às 23:38
  • @Insanity bem para falar a verdade, no contexto do que foi perguntado, onde isso poderia ajudar ?
    – MagicHat
    8/10/2016 às 4:17

3 Respostas 3

6
+100

Aqui fica uma sugestão que usa uma estrutura de HTML com um select nativo mas escondido e que é alterado consoante o custom select é mudado.

Fiz também outra versão mais ao estilo de classes e que permite múltiplos selects (exemplo aqui).

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/

2
  • 1
    Blz, Sergio é isso mesmo... Vlw a força;)
    – MagicHat
    14/10/2016 às 2:50
  • @MagicHat ótimo que pude ajudar!
    – Sergio
    14/10/2016 às 7:10
1

Mudar direto na select eu acho que não é possível. Mas o que você pode fazer é transformar isso em uma table e, a partir dela, configurar para que se comporte como se fosse esse 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');
        });

    });

Código no JSFiddle

Referência: Custom Drop-Down List Styling

1
  • Sem jquery...Mas obrigado pela atenção...Se puder, mudar o jquery para o puro js .... Creio ser suficiente...Vlw man ;)
    – MagicHat
    10/10/2016 às 7:02
0

Apesar de achar o exemplo do @Sergio♦ o ideal, segue um exemplo um pouco mais simples:

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>

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

1
  • 1
    O único problema de usar apenas o css, é que vc não vai conseguir o mesmo padrão para todos os navegadores... Gostaria de entender, o porque de poder estilizar várias partes do controle, menos a borda da optionList... Vai saber....Valeu a atenção man...
    – MagicHat
    11/10/2016 às 14:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .