Labelless Widget: How to Change Placeholder Text Color with CSS

I want to change the color of the placeholder text within the Labelless widget, which I have used a few times in my form. The field ID for one of these fields is #input_91. I know I have to inject the CSS code into the widget settings box, but I have tried a few different options (suggested by your AI bot) and none of them have worked.

Thanks

Hi Melise,

Thanks for reaching out to Jotform Support. I'm an AI assistant here to assist you.

Let me help you with changing the color of the placeholder text within the Labelless widget for your field with ID #input_91. Since widgets have their own CSS injection option, you need to inject your custom CSS code directly into the widget's settings.

Here’s how to do it:

1. In Form Builder, select the Labelless widget you want to customize.
2. Click on the Wand icon on the right side of the widget to open its settings.
3. Go to the Custom CSS tab within the widget settings.
4. Paste the following CSS code to change the placeholder text color for the input field with ID #input_91:

#input_91::placeholder { color: /*your desired color*/; }

Replace /*your desired color*/ with the color name or HEX code you want to use, for example, red or #ff0000.

1. Click Update to save the changes.

This CSS targets the placeholder text specifically for the input field with ID #input_91 inside the widget.

If you have multiple Labelless widgets and want to apply the same style to all placeholder texts, you can use a more general selector inside each widget's Custom CSS or repeat the above steps for each widget's input field ID.

Give it a try and let us know how it goes.

Didn't work.

Hi Melise,

Thanks for your update. Since the usual CSS injection for placeholder color didn't work in the Labelless widget, here are some important points and troubleshooting tips to consider:

• The Labelless widget uses its own iframe, so CSS must be injected directly inside the widget's Custom CSS tab accessed via the wand icon.
• Make sure you are targeting the correct input field ID inside the widget. For example, use:

#input_91::placeholder { color: /*your desired color*/; }

• Replace /*your desired color*/ with a valid color name or HEX code.
• Double-check that you are editing the CSS inside the widget's settings, not the form's global CSS.
• Custom CSS in widgets is not supported in Jotform Cards layout. Ensure your form is using the Classic Layout.
• After injecting the CSS, click Update in the widget settings and save your form.

If these steps still don't work, please verify the form layout and widget version. Sometimes clearing your browser cache or trying a different browser helps to see the CSS changes.

For more details, you can refer to the guide on How to Inject CSS Codes to Widgets.

Give it a try and let us know how it goes.

Still not working

Hi Melise,

One of our Support Team members will take it from here to follow up shortly.

Hi Melise,

To change the placeholder color in your Labelless widget, inject the custom CSS code into the widget’s CSS settings. Let me show you how:

1. First, copy this code:

#inputLabel {

  color: #716e6e;

}

2. In Form Builder, select the Labelless widget and click on the Wand icon.

3. Now, go to the Custom CSS tab, paste the Custom CSS Code to the Custom CSS input box and click on the Update button. Take a look at the screenshot of the result below:

That’s it. Let us know if you have any other questions.

This is perfect! I keep saying to myself that I need to learn to code...thank goodness you guys are here to fill in what I don't know.