The Solution

In general, styling form elements is a complex task, as each browser applies its own interface rules to them. WooCommerce complicates this by using several nested elements with their own classes which requires a lot of overrides to restyle.  We will not get into form styling techniques here, but below is a quick snippet of some Custom CSS you can use an customize.


Go to Theme Options and paste the following into the Custom CSS field.

/*- FORMS ---------------------------------------------------------------------------*/
ul.gform_fields{margin: 0; padding: 0;}
ul.gform_fields .gfield{overflow: hidden; margin-bottom: 25px;}
.gform_fields label{color: #454545;}
.woocommerce select {position: relative; display: inline-block; font-family: 'libre baskerville', georgia, serif; font-size: 14px; display: inline-block; margin: 0; padding: 10px; line-height: 1.5;color: #FFF; background-color: #EAB4A4; width: 100%; cursor: pointer; outline: 0;}
.woocommerce select option{color: #7e7e7e; font-size: 12px; padding: 3px; border: 0px;}
/* Undo the Firefox inner focus ring */
.woocommerce select:focus:-moz-focusring {color: transparent; text-shadow: 0 0 0 #454545;}
/* Dropdown arrow */
.woocommerce select:after {position: absolute; top: 50%; right: 1.25rem; display: inline-block; content: "v"; width: 0; height: 0; margin-top: -.15rem; pointer-events: none; border-top: .35rem solid; border-right: .35rem solid transparent; border-bottom: .35rem solid transparent; border-left: .35rem solid transparent;}
/* Hover state */
/* Uncomment if you need it, but be aware of the sticky iOS states.
.select select:hover {
  background-color: #ddd;
/* Focus */
.woocommerce select select:focus {box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;}
/* Active/open */
.woocommerce select select:active {color: #fff; background-color: #0074d9;}
/* Hide the arrow in IE10 and up */
.woocommerce select select::-ms-expand {display: none;}
/* Media query to target Firefox only */
@-moz-document url-prefix() {
  /* Firefox hack to hide the arrow */
  .woocommerce select {
    text-indent: 0.01px;
    text-overflow: '';
    padding-right: 1rem;
  /* elements inherit styles from, so reset them. */
  .woocommerce select option {
    background-color: white;
/* IE9 hack to hide the arrow */
@media screen and (min-width:0\0) {
  .woocommerce select select {
    z-index: 1;
    padding: .5rem 1.5rem .5rem 1rem;
  .woocommerce select:after {
    z-index: 5;
  .woocommerce select:before {
    position: absolute;
    top: 0;
    right: 1rem;
    bottom: 0;
    z-index: 2;
    content: "";
    display: block;
    width: 1.5rem;
    background-color: #eee;
  .woocommerce select select:hover,
  .woocommerce select select:focus,
  .woocommerce select select:active {
    color: #555;
    background-color: #eee;