JSFiddle - React, Tailwind, and code Playground
HTML
<div class="editor-label">
<div class="editor-sublabel labelWidthShortLeft">Dimension Key</div>
<div class="editor-field">
<div class="ui-widget">
<select disableValidation="true" id="DKID1" name="DKID1" onchange="turnOnOverlay(); form.submit();">
<option value="">-- Select One --</option>
<option value="8">10/09 Banner Campaign - All Recipes - Burst Creative (AlRcBanBurst)</option>
<option value="326">All Recipes - Banner - Heavy Up FY13 - 160x600 (ARBanhvu136)</option>
<option value="327">All Recipes - Banner - Heavy Up FY13 - 300x250 (ARBanhvu133)</option>
<option value="328">All Recipes - Banner - Heavy Up FY13 - 728x90 (ARBanhvu137)</option>
</select
</div>
</div>
</div>
<div class="editor-label">
<div class="editor-sublabel labelWidthShortLeft">Coupon Offer Code</div>
<div class="editor-field">
<div class="ui-widget">
<select id="CouponOfferCode" name="CouponOfferCode">
<option value="">-- Select One --</option>
<option value="7">Heinz - Ore-Ida - $0.50 - TARGET WEB (77945)</option>
<option value="8">Heinz - Ore-Ida - $0.50 - TARGET WEB (Final) (82830)</option>
<option value="11">Heinz - Ore-Ida - $1 - Facebook - 042165 (2011-04) (85475)</option>
<option value="10">Heinz - Ore-Ida - Gravy - Site - BOGO (83839)</option>
<option value="16">Save $0.50 off ONE (1) bag of Ore-Ida® Tater Tots® (108750)</option>
<option value="9">Save $1 on Ore-Ida Steam n' Mash Frozen Products (83488)</option>
<option value="19">Test Coupon MC2 (TestCOCMC2)</option>
<option value="20">Test Description edit 2 (TestMC611OC)</option>
</select>
</div>
</div>
</div>
<div class="editor-label">
<div class="editor-sublabel...
CSS
/* General Overrides */
html
{
height: 100%;
}
body
{
font-size: 14px;
font-family: "pt-sans", Verdana, Helvetica, Sans-Serif;
color: #000000;
background-color: #ffffff;
margin:0px;
padding: 0px 0px 0px 0px;
background: url(/images/footer-bg.jpg);
height: 100%;
/* Tell iPhone/iTouch platform not to try and resize various text objects
for readability, so the site renders normally */
-webkit-text-size-adjust: none;
}
a:hover
{
text-decoration: underline;
}
header, footer, nav, section
{
display: block;
}
input[type="text"], input[type="email"], input[type="password"], textarea, input[type="button"], input[type="submit"]
{
/* Force fields on iOS to look like the desktop */
-webkit-appearance: none;
}
input[type='submit'], input[type='button'], a.BigButton
{
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:#ededed;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777 !important;
font-size:16px;
line-height: 38px;
height: 38px;
font-weight:bold;
padding: 0px 15px 0px 15px;
text-decoration:none;
margin: 0px;
text-shadow:1px 1px 0px #ffffff;
}
a.BigButton:visited, a.BigButton:active
{
color:#777777 !important;
}
input[type='submit']
{
font-size: 16px;
height: 36px;
line-height: 36px;
font-weight:bold;
padding: 0px 20px 0px 20px;
margin-top: 18px;
}
input[type='submit']:hover, input[type='button']:hover,
input[type='submit'].Filters.selected, input[type='button'].Filters.selected, input[type='button'].Filters.active, a.BigButton:hover
{
-moz-box-shadow:inset 0px 1px 0px 0px #759de2;
-webkit-box-shadow:inset 0px 1px 0px 0px #759de2;
box-shadow:inset 0px 1px 0px 0px #759de2;
background: #456db2;
border:...
JavaScript
(function ($) {
$.widget("ui.combobox", {
_create: function () {
this.wrapper = $("<span>")
.addClass("ui-combobox")
.insertAfter(this.element);
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function () {
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input = $("<input>")
.appendTo(this.wrapper)
.val(value)
.attr("title", "")
.addClass("ui-state-default ui-combobox-input ui-widget ui-widget-content ui-corner-left")
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy(this, "_source")
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on(this.input, {
autocompleteselect: function (event, ui) {
ui.item.option.selected = true;
this._trigger("select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function () {
var input = this.input,
wasOpen = false;
$("<a>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.tooltip()
.appendTo(this.wrapper)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-combobox-toggle")
.mousedown(function () {
wasOpen =...