Search code examples
cssselectdropdown

Adding class to select tag

I'm trying to add a class to a select tag so a drop down menu can inherit some css styling but I can't get the style to apply. Am I formatting the class incorrectly?

Here's my code:

packagesmenu {
    box-shadow: none!important;
    background: transparent!important;
    background-color: transparent!important;
    padding: 8px 5px!important;
    border-top: 1px solid #AAA!important;
    border-left: 1px solid #AAA!important;
    border-right: 1px solid #AAA!important;
    border-bottom: 1px solid #AAA!important;
    max-width: 100%!important;
    outline: none;
    border-radius: 0;
    margin-bottom:15px!important;
    text-transform:none!important;
}

packagesmenu:focus {
box-shadow: 0 0 5px 0 #ee2b30!important;
border-top: 1px solid #ee2b30!important ;
    border-left: 1px solid #ee2b30!important;
    border-right: 1px solid #ee2b30!important;
    border-bottom: 1px solid #ee2b30!important;
}
<select style="width:100%;display:block;max-width:600px;margin:0 auto;" onchange="window.location.href = this.value" class="packagesmenu" name="packagesmenu" >
<option>Find your location</option>
<option value="https://go.booker.com/location/vixennailsandspamilton/buy/series">
  Milton
</option>
<option value="https://go.booker.com/location/vixennailsandspamississauga/buy/series">
  Mississauga</option>
<option value="https://go.booker.com/location/vixennailsandspadanforth/buy/series">
  Danforth
</option>
<option value="https://go.booker.com/location/vixenburlington/buy/series">
  Burlington
</option>
<option value="https://go.booker.com/location/VixenNailsandSpaOakville/buy/series">
  Oakville
</option>
</select>

Solution

  • In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”).

    So you're class name declaration wrong.

    .packagesmenu {
    box-shadow: none!important;
    background: transparent!important;
    background-color: transparent!important;
    padding: 8px 5px!important;
    border-top: 1px solid #AAA!important;
    border-left: 1px solid #AAA!important;
    border-right: 1px solid #AAA!important;
    border-bottom: 1px solid #AAA!important;
    max-width: 100%!important;
    outline: none;
    border-radius: 0;
    margin-bottom:15px!important;
    text-transform:none!important;
}

.packagesmenu:focus {
    box-shadow: 0 0 5px 0 #ee2b30!important;
    border-top: 1px solid #ee2b30!important ;
    border-left: 1px solid #ee2b30!important;
    border-right: 1px solid #ee2b30!important;
    border-bottom: 1px solid #ee2b30!important;
}