Placeholder text styling

  • Resolved smemma

    (@modula)


    9 years, 3 months ago

    I have some text input fields in my Calculated Fields Form and they each show a placeholder figure of ‘0’. I cannot figure out how to edit this placeholder text’s CSS – I need to change its colour – can anyone help please?!

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author codepeople

    (@codepeople)

    9 years, 3 months ago

    Hello,

    The appearance of placeholders is controlled directly by the browsers, so, you should use the vendors prefixies. Insert a “HTML Content” field in the form with the following piece of code as its content:

    <style>
#fbuilder input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
#fbuilder input::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
#fbuilder input:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
#fbuilder input:-moz-placeholder { /* Firefox 18- */
  color: pink;
}
</style>

    Of course, using the preferred color code.

    More information in the following link:
    https://css-tricks.com/almanac/selectors/p/placeholder/

    Best regards.

    Thread Starter smemma

    (@modula)

    9 years, 3 months ago

    Thank you so much for getting back to me so quickly, and resolving the issue perfectly! Much appreciated

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Placeholder text styling’ is closed to new replies.