Select Page

How to style a Woocommerce dropdown selector with CSS only

I was asked today how to edit the drop-down selector with just CSS. Honestly, I wasn’t really too sure as I haven’t really thought about that much detail before, so I have come up with the solution that worked for me. If it doesn’t work for any of you then please let me know and I’ll try and help the most I can. It looks as though woocommerce over rights the default CSS selector you would normally use

/***************** DROP DOWN SELECTOR ****************/

.select2-container--default .select2-selection--single .select2-selection__rendered { 
    color: #444;
    line-height: 28px;
    border-radius: 2px !important;
    padding: 5px 10px !important;
    background-color: #f2f2f2;
    border: solid 2px #e4e4e4;
}
.select2-container--default .select2-selection--single  { border:none !important; border-radius: 2px !important;}

/***************** END DROP DOWN SELECTOR ****************/
Testing Out VooPlayer for the first time

Testing Out VooPlayer for the first time

AppSumo offers some amazing deals and this Black Friday is no different. I’ve picked up 3 of the programs they offer and they have all lived up to the hype. VooPlayer is amazing and there’s an embedded YouTube video I made above. Then I also purchased Lemlist, Plutio, and Social Bee.

read more

2 Comments

  1. James

    Thanks for the help!

    Reply
  2. Darrel

    Worked great

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Let's Work Together!

Get started with a free consultation today.  We'll guide you in the right direction and ensure your business succeeds.

15 + 9 =