<select id="edit-field-church-language-tid" name="field_church_language_tid" class="form-select jquery-once-4-processed" tabindex="0"><option value="All" selected="selected">- Any -</option><option value="1124">Arabic</option><option value="1125">Cambodian</option><option value="1126">Chinese</option><option value="1127">Creole</option><option value="1128">Dutch</option><option value="1505">Engish</option><option value="1129">English</option><option value="1507">English and Navajo</option><option value="1130">French</option><option value="1131">Hindi</option><option value="1132">Hmong</option><option value="1555">Indonesia</option><option value="1133">Indonesian</option><option value="1134">Karen</option><option value="1135">Khmer</option><option value="1136">Korean</option><option value="1137">Laotian</option><option value="1138">Mandarin</option><option value="1139">Min Nan</option><option value="1554">Minnan Nan</option><option value="1140">Navajo</option><option value="1141">Portuguese</option><option value="1142">Samoan</option><option value="1143">Spanish</option><option value="1144">Swahili</option><option value="1145">Thai</option><option value="1506">Thai, Lao</option><option value="1146">Urdu</option><option value="1147">Vietnamese</option></select>
<select disabled id="edit-field-church-language-tid" name="field_church_language_tid" class="form-select jquery-once-4-processed" tabindex="0"><option value="All" selected="selected">- Disabled -</option><option value="1124">Arabic</option><option value="1125">Cambodian</option><option value="1126">Chinese</option><option value="1127">Creole</option><option value="1128">Dutch</option><option value="1505">Engish</option><option value="1129">English</option><option value="1507">English and Navajo</option><option value="1130">French</option><option value="1131">Hindi</option><option value="1132">Hmong</option><option value="1555">Indonesia</option><option value="1133">Indonesian</option><option value="1134">Karen</option><option value="1135">Khmer</option><option value="1136">Korean</option><option value="1137">Laotian</option><option value="1138">Mandarin</option><option value="1139">Min Nan</option><option value="1554">Minnan Nan</option><option value="1140">Navajo</option><option value="1141">Portuguese</option><option value="1142">Samoan</option><option value="1143">Spanish</option><option value="1144">Swahili</option><option value="1145">Thai</option><option value="1506">Thai, Lao</option><option value="1146">Urdu</option><option value="1147">Vietnamese</option></select>
$border-color: #d4dbe3;

select {
  background-color: #ffffff;
  background-image: url( https://www.crcna.org/sites/all/themes/zen_crcna/images/select-arrow@3x.jpg);
  background-position: right -15px;
  background-repeat: no-repeat;
  background-size: 30px 120px;
  padding-right: 40px;
  border: 1px solid $border-color;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  
  
  /* CRCNA SPECIFIC */
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 6px;
  font-size: 12px;
  line-height: 18px;
  color: #4e4e4e;
  min-height: 18px;
  
  &:focus {
    outline: none;
    border-color: darken($border-color, 10%);
    background-position: right -75px;
  }
  &:disabled { /* selectric */
    filter: alpha(opacity=50);
    opacity: 0.5;
    cursor: default;
    user-select: none;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.