Streaming live at 10am (PST)

How to Disable First option in Form Dropdown (select menu)

When I create a drop down field in a form, I want there to be placeholder text that is NOT selectable.

If you notice on the how did you find us tab, the user is able to select that as an option. How can I make the first option not selectable?

share link>

Thank you!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Maybe having a label element for the dropdowns?

Thanks for the suggestion. Is there anyway to block the first option with code?

I assume there is, although I’m not a coder myself so I wouldn’t be able to help you with that, sorry.

Solution by code.

Step 1 - Add id

Add id for the select menu (Otherwise by mistake you could disable other options menus). category in this example.

Step 2 - disable first option by code

Copy paste “before body” this code snippet:

<!-- disable first dropdown option -->
  $( "#category option:first-child" ).attr("disabled","disabled");

code parts:


Affect all select menus inside form

general selector (disable all first options of all select menus inside a form).

Copy-paste before body (If the form is part of the footer put this code under site-setting)

<!-- disable form first dropdown option -->
  $( "form option:first-child" ).attr("disabled","disabled");


One more option/code - add class to select menu and loop (country-select-field class in this example).


copy-paste before body:

<!-- disable first select menu option (for country) -->

Done :slight_smile:


Hey definitely not following on this. Does this look correct?

What? Be more specific please.

Hi sorry about that, thought I had attached a screenshot of the editor. Not sure if I’m doing this currently or if I followed your instructions precisely. Let me know if the attached screenshot helps.

No. The selector should be “first-child”. No such selector (by select plain text of options) (Your syntax is wrong). Set Your first child with the text “how you find us”.

I will add read-only link if you want.

The read only would be helpful. Thanks!

Hey, just checking in. Can you please provide the read-only link? Thanks!

Clean and readable solution with custom code:

    // Get the entire dropdown via ID
    let selectionDropdown = document.getElementById("selection-dropdown");
    // Now get its options
    let selectionOptions = selectionDropdown.getElementsByTagName("option");
    // Disable the first one. Make sure that you set the first one as the "read-only" option in the 
    // Webflow-UI
    selectionOptions[0].disabled = true;


1 Like

Hello unquestionably not following on this. Does this look right?

1 Like