• 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
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • Handling Errors with the Fetch API
  • ChatGPT Stopping Part Way Through a Response? Here Is How You Fix It
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • How To Mock uuid In Jest

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz