Drop Down Select style

  • Resolved 2020media

    (@2020media)


    7 years ago

    Hi
    In the drop down select form field, the field name is much darker than other types of form field like Text and Textarea.

    I have a form where all the fields are text except one drop down and it really stands out – not in a good way!
    Any suggestions for making the field label look the same as the text fields?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author GusRuss89

    (@gusruss89)

    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

    Thread Starter 2020media

    (@2020media)

    Thank you, I see what you mean – in fact it does behave differently when a value has been selected – there’s no label above it showing what the values relate to.

    I think I’ll use a radio button for my purpose here, and look out for a future update.

    Thank you.

    @gusruss89
    is there any prospect of an update to this bug?
    Not having the label animated above the select when choosing an option is not that nice UX wise..

    Plugin Author GusRuss89

    (@gusruss89)

    Hi @jessman5

    This will be fixed in v2, which is an upgrade to the new material styles for inputs and select fields. The new versions do have a floating label, while the old ones did not.

    See the demo here – https://material-components.github.io/material-components-web-catalog/#/component/select

    v2 is still in development (it’s a big job to make sure the update doesn’t break people’s existing forms) and does not yet have an ETA.

    Sorry about that, but you can be assured that I am working on improving this.

    Thanks,
    Angus

    Okay thanks, looks promising.
    I’ll do a workaround till then.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Drop Down Select style’ is closed to new replies.