Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Custom select box
<select class="ff">
<option>Firefox</option>
<option>Chrome</option>
<option>Internet Explorer Versão 10.0 ulalá isso é demais!!</option>
<option>Safari</option>
</select>
'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();
}
}
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.