3

Tenho um select; e, no último option, chamo uma página.

Como não é possivel utilizar um button dentro de um select, utilizei o onChange.

Queria que a última option fosse o mais parecido com um button em CSS.

var select = document.querySelector('select');

select.addEventListener('change', function () {
var selecionada = this.options[this.selectedIndex];
var url = selecionada.getAttribute('data-url');
if (url) window.location = url;
});

HTML:

<select>
  <option>1</option>
  <option>2</option>
  <option data-url="/page.htm">Button</option>
</select>
2
  • infelizmente, utilizando css você poderá apenas editar o background e a cor da fonte, porém você pode simular um select utilizando uma lista (ul) Commented 13/02/2015 às 14:28
  • Não é possível, você não pode simplesmente colocar o botão fora do <select>? Commented 17/03/2015 às 13:33

1 Resposta 1

2

Tente utilizar o seletor de atributos para estilizar o option que possuir o data-url.

Veja:

select option[data-url]{
    font-weight:bold;
    color:#aaa;
    text-decoration:underline;
    background:#eee;
    border:1px solid #aaa;
    cursor:pointer;
    padding:5px 10px;
    text-align:center;
    border-radius:4px;
    margin:5px;
}
<select>
  <option>1</option>
  <option>2</option>
  <option data-url="/page.htm">Button</option>
</select>

Nota: Fiz o teste utilizando o Firefox 39

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 .