PDX: Native SELECT Styling

Browser-native SELECT (combobox) styling for Legacy PDX usage

by mlhDevelopment

HTML

<h3>Select Test</h3>
<div>
    <select>
        <option>Default &lt;SELECT&gt;</option>
        <option>Alpha</option>
        <option>Bravo</option>
        <option>Charlie</option>
    </select>
</div>
<div>
    <select class="styled">
        <option>Styled &lt;SELECT&gt;</option>
        <option>Delta</option>
        <option>Echo</option>
        <option>Foxtrot</option>
    </select>
</div>

CSS

div {
    float: left;
    margin: 10px;    
    padding: 5px;
}

.styled{
    font-family: Arial;
    font-size: 13px;
    color: #F47E4C;
    font-weight: bold;
    text-transform: uppercase;
    border: solid 1px #cccccc;
    border-radius: 7px;
}

JavaScript

$(function() { 
    $("h3").text("Browser: " + window.navigator.userAgent.replace(/[\W\d]+/g,", "));
});