SELECT Placeholder

Shows how to style a SELECT OPTION as placeholder text

by Emmanuel Garcia

HTML

<form>
    <input type="text" placeholder="Placeholder..."/><br/>
    <input type="text" value="Text"/><br/>
    <select>
        <option value="" class="placeholder">Placeholder...</option>
        <option value="1">Opt 1</option>
        <option value="2">Opt 3</option>
    </select>
    <input type="button" value="Ok"/>
</form>

CSS

body { color: #000; background: #fff; }
select { color: red; }
select option { color: green; }
.placeholder { color: blue; }

JavaScript

var addClass = function(el, className) {
        if (el.classList) {
              el.classList.add(className);
        } else {
              el.className += ' ' + className;
        }
    },
    hasClass = function(el, className) {
        return el.classList ?
            el.classList.contains(className) :
            new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
    },
    removeClass = function(el, className) {
        if (el.classList) {
            el.classList.remove(className);
        } else {
            el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
        }
    },
    updateSelectPlaceholderClass = function(el) {
        var opt = el.options[el.selectedIndex];
        if(hasClass(opt, "placeholder")) {
            addClass(el, "placeholder");
        } else {
            removeClass(el, "placeholder");
        }             
    },
    selectList = document.querySelectorAll("select");
//Simulate placeholder text for Select box
for(var i = 0; i < selectList.length; i++) {
    var el = selectList[i];
    updateSelectPlaceholderClass(el);
    el.addEventListener("change", function() {
        updateSelectPlaceholderClass(this);
    });
}