Option with CSS button type

Asked

Viewed 118 times

3

I have a select; and, on the latter option, I call a page.

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

I wanted the last option was the closest thing to a 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

  • Unfortunately, using css you can only edit the background and font color, but you can simulate a select using a list (ul)

  • Not possible, you can’t just put the button outside the <select>?

1 answer

2


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

Behold:

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 did the test using the Firefox 39

Browser other questions tagged javascript css

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