• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Firefox Placeholder Text Looking Lighter Than Other Browsers?

HTML5 · October 31, 2014

If you answered yes, you have just found the solution. Keep on reading.

If you are new to styling placeholder text or perhaps have just not noticed, Firefox in version 19 and beyond by default applies an opacity of 40% (0.4) to placeholder text, as per the documentation.

While I have known about this particular caveat for a while, it turns out a lot of developers who I have asked were not aware that this happens. So next time you change the colour of placeholder text in Firefox, set the opacity to 1 and you should be fine.

See below for an example of placeholder text being set white and the opacity fix being applied for Firefox.

input::-webkit-input-placeholder,
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
    color #FFF;
}
    
input:-moz-placeholder,
input::-moz-placeholder {
    opacity: 1;
}

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • How To Mock uuid In Jest
  • Which Neural DSP Archetype Plugins Should You Buy?
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Removing A Character From The Start/End of a String In Javascript
  • How To Convert FormData To JSON Object
  • How To Correctly Use Semantic HTML5 <article>, <main> and <section> Tags
  • Wild Natural Deodorant Review
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz