<select> reloads page when clicked on Opera Mini

Question

Clicking on a <select> element with border:none; and cursor:pointer in Opera Mini reloads the page. Minimal example:

select {
  cursor: pointer;
  border: none;
}

<select>
  <option value="1">English</option>
  <option value="2">Mathematics</option>
  <option value="3">Social Studies</option>
  <option value="4">Business</option>
</select>

Anyone knows a better way of fixing that other than removing one of these CSS properties or changing the border to solid transparent 1px?

Your minimal example needs to be included in the question. JSFiddle/JSBin links have never counted as including an example in your question. — user229044

Pinal Pinal · Accepted Answer · 2015-09-03T16:52:10

It is a cursor: pointer; feature. If you click on pointer area opera mini send page to server to run javascript event delegation.

Event Delegation in Opera Mini

Until recently,Event delegation didn’t work in Opera Mini. Now it’s implemented by the Server sending clickable areas to the client for anything with cursor:pointer. Delegation mostly works as expected with click events with the exception of form elements; it’s rather hard to detect whether using them should trigger an event (and thus a server round trip) or not, unless an event listener is attached directly to them. A workaround is to add a dummy event listener to required form element.

<select> reloads page when clicked on Opera Mini

1 Answers