Title: Drop Down Select style
Last modified: March 15, 2018

---

# Drop Down Select style

 *  Resolved [2020media](https://wordpress.org/support/users/2020media/)
 * (@2020media)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/drop-down-select-style/)
 * 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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fdrop-down-select-style%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [GusRuss89](https://wordpress.org/support/users/gusruss89/)
 * (@gusruss89)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/drop-down-select-style/#post-10080410)
 * Hi [@2020media](https://wordpress.org/support/users/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](https://wordpress.org/support/users/2020media/)
 * (@2020media)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/drop-down-select-style/#post-10081556)
 * 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.
 *  [jessman5](https://wordpress.org/support/users/jessman5/)
 * (@jessman5)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/drop-down-select-style/#post-10525568)
 * [@gusruss89](https://wordpress.org/support/users/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](https://wordpress.org/support/users/gusruss89/)
 * (@gusruss89)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/drop-down-select-style/#post-10525596)
 * Hi [@jessman5](https://wordpress.org/support/users/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](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
 *  [jessman5](https://wordpress.org/support/users/jessman5/)
 * (@jessman5)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/drop-down-select-style/#post-10525616)
 * 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.

 * ![](https://s.w.org/plugins/geopattern-icon/material-design-for-contact-form-
   7_f8f8f8.svg)
 * [Material Design for Contact Form 7](https://wordpress.org/plugins/material-design-for-contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/material-design-for-contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/material-design-for-contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/material-design-for-contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/material-design-for-contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/material-design-for-contact-form-7/reviews/)

 * 5 replies
 * 3 participants
 * Last reply from: [jessman5](https://wordpress.org/support/users/jessman5/)
 * Last activity: [7 years, 10 months ago](https://wordpress.org/support/topic/drop-down-select-style/#post-10525616)
 * Status: resolved