Form Field Hint Font Face

[Jim_DiModica]

Hi -

How can I control the "Hint" font face? The form has two fields (Email Address & Postal Code).

I've tried this custom CSS but it has no effect.

<style type="text/css">

.mktoForm input[type=text],

.mktoForm input[type=email],

.mktoForm select.mktoField,

.mktoForm textarea.mktoField

{

  color:#444444 !important;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 11px;

}

</style>

Thanks for any info!

- Jim

[Jenna_Molby10 · Accepted solution]

Hint text is also called placeholder text in HTML it can be styled using this CSS:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */

  font-family:'Roboto', Sans-serif;

}

::-moz-placeholder { /* Firefox 19+ */

  font-family:'Roboto', Sans-serif;

}

:-ms-input-placeholder { /* IE 10+ */

  font-family:'Roboto', Sans-serif;

}

:-moz-placeholder { /* Firefox 18- */

  font-family:'Roboto', Sans-serif;

}

[SanfordWhiteman]

Don't forget the polyfill in IE 8/9, which doesn't use native placeholders.

[Jim_DiModica]

Thanks, Sanford, for adding to the thread. "polyfill" ? Have an example?

And is there a different tact for Chrome?

[SanfordWhiteman]

::-webkit-input-placeholder works for me in Chrome 51.

For the polyfill, if you examine the DOM in IE8-9 you can see the styles.

[SanfordWhiteman]

.mktoForm div.placeholder {

  /* polyfill styles here */

}

[Anonymous]

I've tried examining the DOM in IE9 and I just can't figure this out. Where are you seeing it in the DOM?

This is what I have - it is certainly not working in IE9

.mktoForm .mktoPlaceholder {

color: #464651 !important;

}

[SanfordWhiteman]

The class has changed. Now it's

.mktoForm .placeholder

[Jim_DiModica]

Thanks Jenna - much appreciated!

Also appreciated, your knowledge of which gets the double colon and which gets the single.

While testing, we note that it doesn't work in Chrome (v51) and Safari (can live without Safari).

Here's the code:

<style type="text/css">

::-webkit-input-placeholder { /* Chrome/Opera/Safari */

  font-family: Arial, Helvetica, sans-serif;

  color:#f7931e;

}

::-moz-placeholder { /* Firefox 19+ */

  font-family: Arial, Helvetica, sans-serif;

  color:#f7931e;

}

:-ms-input-placeholder { /* IE 10+ */

  font-family: Arial, Helvetica, sans-serif;

  color:#f7931e;

}

:-moz-placeholder { /* Firefox 18- */

  font-family: Arial, Helvetica, sans-serif;

  color:#f7931e;

}

</style>

If you've got a Chrome remedy, kindly pass it along.

Thanks again!

- Jim