Dropdown Styling
HTML
<body>
<div class="toolbar-select">
<select data-bind="value: sortType" name="sortType">
<option value="userName">User Name</option>
<option value="emailAddress">Email Address</option>
<option value="numActive">Most Active Subscriptions</option>
<option value="numPending">Most Pending Subscriptions</option>
<option value="numPaused">Most Paused Subscriptions</option>
<option value="numCanceled">Most Canceled Subscriptions</option>
<option value="numExpired">Most Expired Subscriptions</option>
<option value="numFailed">Most Failed Subscriptions</option>
<option value="numPendingApproval">Most Pending Requests</option>
<option value="lastRequestDate">Most Recent Request Date</option>
</select>
</div>
</body>
CSS
/* Blue Toolbar Selection Dropown */
.toolbar-select {
display: block;
width: 250px;
height: 36px;
line-height: 36px;
overflow: hidden;
background-color: #0096d6;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
position: relative;
}
.toolbar-select:hover,
.toolbar-select:active,
.toolbar-select:focus {
background-color: #006699;
}
.toolbar-select:after {
content: "v";
color: white;
font-size: 24px;
position: absolute;
pointer-events: none;
right: 8px;
top: 0px;
}
.toolbar-select select {
background: transparent;
height: 30px;
line-height: 30px;
width: 250px;
padding-left: 15px;
padding-right: 45px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
font-size: 16px;
border: 0px;
text-indent: 0.01px;
text-overflow: '';
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
color: #ffffff;
font-weight: bold;
}
/* Chrome hack to fix positioning */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.toolbar-select select {
margin-top: -5px;
}
}
.toolbar-select select option {
color: #000000;
background-color: #ffffff;
font-size: 16px;
font-weight: normal;
line-height: 22px;
height: 22px;
padding-left: 10px;
padding-right: 20px;
border-left: 1px solid #5a5a5a;
border-right: 1px solid #5a5a5a;
}
.toolbar-select select option:last-child {
border-bottom: 1px solid #5a5a5a;
}
/* IE Hacks */
/* Removes dropdown arrow from IE */
.toolbar-select select::-ms-expand {
display: none;
}
.ie9 .toolbar-select {
background: none;
background-color: #0096d6;
}
.ie9 .toolbar-select:after {
content: '';
}
.ie9 .toolbar-select select {
padding-left: 10px;
padding-right: 0px;
}
.ie9 .toolbar-select select option {
background-color: #0096d6;
color: #ffffff;
}