Option with CSS type button

Question

Option with CSS type button

Navigation

#1 by (2 votes)

3

I have a select ; and in the last option , I call a page.

Since it is not possible to use a button within a select , I used onChange .

I wanted the last option to be the most like button in 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>

javascript css

asked by anonymous 13.02.2015 / 13:58

1 answer

Charging bar with pure JavaScript in R, create a vector rounding function so that the coordinates are 100

score 2 · Accepted Answer

Try using the attribute selector to style the option that has data-url .

See:

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>

Note : I tested using Firefox 39