Input fields placeholders

Stagger Lee
1774 Posts
Stagger Lee posted this 08 July 2015

How to style them ?
I see Themler gives them color: #dddddd;. Color is weak even on white background.

How to style them ? I see Themler gives them color: #dddddd;. Color is weak even on white background.
Vote to pay developers attention to this features or issue.
8 Comments
Order By: Standard | Newest
Stagger Lee
1774 Posts
Stagger Lee posted this 08 July 2015

Input focus too. It gets blue box-shadow and have no clue how to change it.

Input focus too. It gets blue box-shadow and have no clue how to change it.
Stagger Lee
1774 Posts
Stagger Lee posted this 08 July 2015

input[type="text"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="datetime"]::-moz-placeholder, input[type="datetime-local"]::-moz-placeholder, input[type="date"]::-moz-placeholder, input[type="month"]::-moz-placeholder, input[type="time"]::-moz-placeholder, input[type="week"]::-moz-placeholder, input[type="number"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="url"]::-moz-placeholder, input[type="search"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="color"]::-moz-placeholder {
  color: inherit !important;
}
select::-moz-placeholder, textarea::-moz-placeholder {
  color: inherit !important;
}

input[type="text"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="datetime"]::-moz-placeholder, input[type="datetime-local"]::-moz-placeholder, input[type="date"]::-moz-placeholder, input[type="month"]::-moz-placeholder, input[type="time"]::-moz-placeholder, input[type="week"]::-moz-placeholder, input[type="number"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="url"]::-moz-placeholder, input[type="search"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="color"]::-moz-placeholder { color: inherit !important; } select::-moz-placeholder, textarea::-moz-placeholder { color: inherit !important; }
Support Team
Support Team posted this 09 July 2015

Hello Stagger Lee,
for now the only possible way to style placeholders is custom CSS code. There's no special control in Themler to apply style for placeholders.

Regards,
Aileen

Hello Stagger Lee, for now the only possible way to style placeholders is custom CSS code. There's no special control in Themler to apply style for placeholders. Regards, Aileen
stefan.riva
3 Posts
stefan.riva posted this 27 May 2016

Any news if it is possible to style it now? Or is it still only styleable with custom css?

Stefan

Any news if it is possible to style it now? Or is it still only styleable with custom css? Stefan
Support Team
Support Team posted this 30 May 2016

Hello Stefan,
unfortunately the answer is No. There's no intention to support styling placeholders in the near future.

Regards,
Aileen

Hello Stefan, unfortunately the answer is No. There's no intention to support styling placeholders in the near future. Regards, Aileen
DeeMo
38 Posts
DeeMo posted this 06 July 2016

If you don't intend to provide control for styling placeholders then perhaps you could set the default to inherit the same as the Input rather than #dddddd which is weak on every possible background

If you don't intend to provide control for styling placeholders then perhaps you could set the default to inherit the same as the Input rather than #dddddd which is weak on every possible background
Support Team
Support Team posted this 07 July 2016

Hi,

I've added your request to our wish list.

Thank you,
Olivia

Hi, I've added your request to our wish list. Thank you, Olivia
johnzeiger
8 Posts
johnzeiger posted this 28 March 2017

Seems silly that something as simple as this isn't configurable in Themler

I had to add the following code to Home > Settings > Additional CSS which I found at https://www.templatemonster.com/help/how-to-change-the-placeholder-text-color-of-an-input.html

input::-webkit-input-placeholder {
color: red !important;
}

input:-moz-placeholder { /* Firefox 18- */
color: red !important;
}

input::-moz-placeholder { /* Firefox 19+ */
color: red !important;
}

input:-ms-input-placeholder {
color: red !important;
}

Seems silly that something as simple as this isn't configurable in Themler I had to add the following code to Home > Settings > Additional CSS which I found at https://www.templatemonster.com/help/how-to-change-the-placeholder-text-color-of-an-input.html input::-webkit-input-placeholder { color: red !important; } input:-moz-placeholder { /* Firefox 18- */ color: red !important; } input::-moz-placeholder { /* Firefox 19+ */ color: red !important; } input:-ms-input-placeholder { color: red !important; }
You must log in or register to leave comments