Custom select box

Custom-select-box.markdown

Custom select box

Custom select box for Firefox while we are waiting for the release of 35!!

A Pen by Thiago Lagden on CodePen.

License.

index.html

<select class="ff">
  <option>Firefox</option>
  <option>Chrome</option>
  <option>Internet Explorer Versão 10.0 ulalá isso é demais!!</option>
  <option>Safari</option>
</select>

script.js

'use strict';

(function(root, doc) {
  var ffSelectBox;
  ffSelectBox = function() {
    var selects = doc.querySelectorAll('select.ff');
    [].forEach.call(selects, function(select) {
      var prop;
      var bounds = select.getBoundingClientRect();
      var cs = root.getComputedStyle(select, null);
      var cover = doc.createElement('span');
      var boundsStyle = {
        'position': 'absolute',
        'top': bounds.top + 'px',
        'right': bounds.right + 'px',
        'bottom': bounds.bottom + 'px',
        'left': bounds.left + 'px',
        'width': bounds.width + 'px',
        'height': bounds.height + 'px',
        'pointerEvents': 'none'
      };

      for (prop in cs)
        if (
          cs[prop] !== null &&
          cs[prop] !== undefined &&
          cs[prop].length > 0 &&
          typeof cs[prop] !== 'object' &&
          typeof cs[prop] !== 'function' &&
          prop != parseInt(prop, 10)
        )
          cover.style[prop] = cs[prop];

      for (prop in boundsStyle)
        if (boundsStyle.hasOwnProperty(prop))
          cover.style[prop] = boundsStyle[prop];

      select.parentNode.insertBefore(cover, select);
      select.style.opacity = 0;
      select.addEventListener('change', function(event){
        cover.textContent = select.options[select.selectedIndex].text;
      }, false);

      cover.textContent = select.options[select.selectedIndex].text;
    });
  };
  root.ffSelectBox = ffSelectBox;
}(window, document));

var fff = navigator.userAgent.match(/Firefox\/[0-9]+/ig);
if (fff !== null) {
  if (fff.length === 1) {
    var version = parseInt(fff[0].split('/')[1], 10);
    if (version < 35)
      window.ffSelectBox();
  }
}

style.css

select::-ms-expand {
  display: none;
}

select,
select[size="0"],
select[size="1"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRo PSIzMjAiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgMzIwIDUxMiI+CiAg ICA8cGF0aCBmaWxsPSIjNmM2YzZjIiBkPSJNMjU2IDE2MGwtOTYgOTYtOTYt OTYtNjQgNjQgMTYwIDE2MCAxNjAtMTYwLTY0LTY0eiI+PC9wYXRoPgo8L3N2 Zz4K ");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  background-size: 10px;
  background-color: white;
  width: 100%;
  border: 0;
  border-radius: 5px;
  box-sizing: border-box;
  color: gray;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px;
  padding-right: 25px;
  margin: 0;
  outline: 0;
  text-align: left;
  vertical-align: top;
  font-size: 20px;
  font-family: Arial;
}

body {
  background: black;
  width: 200px;
  margin: 50px;
}