Drop Down Select style

Hi @2020media

The select field is a bit different to the rest in that it doesn’t actually have a label – instead it inserts your label text as the first option in the field. It’s done this way because at the time it was built, the Material Components library (by Google) didn’t have a good alternative.

It will be fixed in an upcoming release, but if you just want to fix the colour, and know how to add some JavaScript and Custom CSS to your theme, you can do the following.

1. Add this JavaScript to your theme

jQuery(document).on('ready', function(){
  jQuery('.cf7md-select select').on('change', function(e) {
    if (jQuery(this).val() !== jQuery(this).find('option:first-of-type').attr('value')) {
      jQuery(this).addClass('is-selected').removeClass('is-label')
    } else {
      jQuery(this).removeClass('is-selected').addClass('is-label')
    }
  })
})

2. Add this CSS to Appearance > Customizer > Material Design Forms > Custom CSS

#cf7md-form .mdc-select.is-label {
    color: rgba(0, 0, 0, 0.38);
}
#cf7md-form .mdc-select.is-selected {
    color: rgba(0, 0, 0, 0.87);
}

Thanks,
Angus