How to show a placeholder for Drop Downs

 Placeholders work on textfields and textareas by simply entering the placeholder property. But for drop down's, there is no built-in placeholder attribute. This article explains a workaround to enable placeholders. 

Adding the First Option to Field Values

Open the Field Values window and add the placeholder text you want to display under the Display Value column. Be sure to leave the Data Value column blank.

This will allow required validation to be enforced and will ensure the user selects something other than the first option shown. 

Making the First Item appear Gray

If you don't mind that the first option shown is not grayed out, you can stop here, your done. Read on if you want to make that option grayed out like the other placeholders. 

In order to do this we need to a little bit of CSS and a little JS. 

Getting the Field ID. 

Use the browsers inspector (F12) to inspect the form and get the field ID. Save this to your clipboard or notepad as you will need it for the following steps.

Adding the CSS

1. Click on the Form Name (Form Root Node) in the Form Outline Panel. 
2. Under Form Properties > Form General Settings scroll down and click Custom CSS
3. Enter the Following CSS, modifying the fieldID ("field_1530303916458_10") to match the Field ID for which you want to apply this technique.

/* grayed out select/placeholder (combined with js in onload action) */
#field_1530303916458_10,#field_1530303916458_10>option,#field_1530303916458_10>option[value=""] {
color: #999;
}

Adding the JS

We also need a little JS to run when the form loads. 

1. Click on the Form Name (Form Root Node) in the Form Outline Panel. 
2. Under Form Properties > Form General Settings scroll down and click Actions
3. Click New and choose Custom JS, give the action a name and click Next
4. Copy the code below () into the window, modifying the fieldID ("field_1530303916458_10") to match the Field ID for which you want to apply this technique

// This function will receive the field and form objects.
function(field,form){
form.field_1530303916458_10.getEl().change( function (){
$( this ).css( 'color', $( this ).val() === '' ? '#999' : '#555' );
});
}

Save your changes and test your form and the first option in the drop down will now be shown in gray.