Cool Styles for Animated Select Menu

Select menu which sometimes goes by the name of dropdown is one of those things that has got very little attention for customization. Most codes include some form of javascript to make them stylish. The css codes too come with long list of tags.

Unfortunately, that can slow down the site. There are actually cooler ways to change the select bar using very less css. Try the following codes.

We are using here the official tag select. Certain web templates come with another tag called custom select. Under such circumstances, all you need to do is simply copy the styles from below and paste under that tag.

Cool Blue

select {

    font-size: large;

    background-color: #13437b;

    color: white;

    padding: 8px;

    border-radius: 7px;

    box-shadow: inset 0 0 9px #ffffff;

    outline: none;

    border: 4px groove #8bddff;

    -webkit-transition: all 1s;

    transition: all 1s;

    transition-property: all;

    transition-duration: 1s;

    transition-timing-function: ease;

    transition-delay: 0s;}

select:hover {

    background-color: #00c;

    box-shadow: inset 0 0 4px 5px #ffffff, 0 0 4px 3px #2196f3ad;

    border: 4px solid #b2ffe2;

    text-shadow: 0 0 1px black;

}

Fresh Teal

select {
    background-color: #5aeceb;
    color: #2a9096;
    padding: 5px;
    font-size: 23px;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkwt22nG1GWoVoa2FC2l7u6cTG57OikcRRwzKYEwOM6zJbZ03_hs-9MEb5pa_p024AK3F2KnyR5IL4DZW1YgqMXchtdxcPGCZMqCS2tMsbgzGrX4volp_4ThHIIhLK7byX7WSK8uxkftAd/s1600/green+glitter.gif);
    outline: none;
    background-blend-mode: overlay;
    border-radius: 8px;
    box-shadow: 0px 0px 5px 4px #45dccc;
    border: 4px dashed #fff;
   text-shadow: 1px -1px #55f4f5;
   cursor: pointer;
}

select:hover {
    border: 4px dotted #fff;
}

option {background-color: #e2fff7;

}

Sunny Select

select {
background: #ffc107;
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYOBuYOMn5ivNmXlMuI_O7MrKWzvf5iEhjY4rV0oX5l8NjyMIBeVq3-Cf76R0l-e4Yn0b6WQxIDIj0fMLDTUyY8QQTeHfE2lpq-7hYaXFkUpuysUqkMbeliqHv11Ctd0Q7PEQyVCcqKVkW/s1600/rain+effect+in+yellow.gif);
 outline: none;
 font-size: 20px;
 color: #ce0707; padding: 7px;
 box-shadow: inset 0 0 0 2px #ff6565; border-radius: 9px; cursor: pointer; }

option { background: #e2e283; }

Feminine

select {
    text-transform: uppercase;
    font-size: 25px;
    background:#c181e8;
    background: linear-gradient(#dc22d0, #c181e8, #a300cc);
    color: white;
    padding: 3px;
    outline: none;
    box-shadow: -1px 1px 5px 2px #c687eb;
    border: 2px solid white;
    border-left: 9px solid white;
    border-right: 9px solid white;
    cursor: pointer;
    text-shadow: 0 0 1px white;
-webkit-transition: box-shadow 2s;
    transition: box-shadow 2s;
transition-property: box-shadow;
    transition-duration: 2s;
    transition-timing-function: ease;
    transition-delay: 0s}

option {
    background-color: #d26d9c;
}
select:hover {
    box-shadow: -1px 1px 9px 6px #d5a1f3;
background:#d26d9c;
    background: linear-gradient(#c172cc, #f1b8fb, #d26d9c);
    text-shadow: 0 0 2px #000000cc;}