SOLVED

Form Field Hint Font Face

Go to solution
Jim_DiModica
Level 3

Form Field Hint Font Face

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

1 ACCEPTED SOLUTION

Accepted Solutions
Jenna_Molby10
Level 3 - Champion Alumni

Re: Form Field Hint Font Face

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;

}

View solution in original post

8 REPLIES 8
Jenna_Molby10
Level 3 - Champion Alumni

Re: Form Field Hint Font Face

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
Level 10 - Community Moderator

Re: Form Field Hint Font Face

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

Jim_DiModica
Level 3

Re: Form Field Hint Font Face

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

And is there a different tact for Chrome?

SanfordWhiteman
Level 10 - Community Moderator

Re: Form Field Hint Font Face

::-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
Level 10 - Community Moderator

Re: Form Field Hint Font Face

.mktoForm div.placeholder {

  /* polyfill styles here */

}

Anonymous
Not applicable

Re: Form Field Hint Font Face

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
Level 10 - Community Moderator

Re: Form Field Hint Font Face

The class has changed. Now it's

.mktoForm .placeholder

Jim_DiModica
Level 3

Re: Form Field Hint Font Face

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