1

I am trying to change the "Select an option" text's style, of WooCommerce checkout page, in bolder because it is faded and I get an accessibility error when scanned with WAVE.

I have tried this CSS but nothing changes, could you indicate me where am I mistaking?

Select a category {
  color: #cccccc
  
}
span.select2-selection.select2-selection--single {
  color: #000000;
}
span.select2-selection__placeholder {
  font-family: Roboto;
  font-size: 16px;
  line-height: 18px;
  font-weight: 400;
  font-style: normal;
  color: #cccccc;
  background-color: #ffffff;
}

Or if there is an other CSS to do it?

The site is www.defkalionsa.gr

Loucas Karapatouchas
  • 43
  • 4

1 Answers1

2

you can try the below css:

.select2-selection__placeholder {
    font-weight:bold; /* for your "bolder" request" */
    color:black; /* better than gray for accessibility */
}

if that does not work, you should clear browser cache, and check if other style declarations are taking precedence. You can temporarily add "!important" to overwrite other declarations.

.select2-selection__placeholder {
    font-weight:bold!important;
    color:black!important;
}
Petros
  • 76
  • 5