CSS: Why Color code #999 shades are different in Chrome and Firefox?

Question

I need to change the HTML5 input placeholder styles as following.

input[type="text"]#myInput::placeholder {
font-size: 13px;
  font-family: helvetica;
  color: #999;
  font-weight: 400;
}

In the above snippet, I have used the colour shade #999, but it is looking think in chrome and IE and very light in Firefox.

My sample code here: https://codepen.io/JGSpark/pen/MMQxER?&editable=true

Kindly try this in Chrome first and Firefox next.

P.S: I am using Chrome 75+, Firefox 67+, IE11

Can anyone please help me to make this look similar across all the browsers?

Answer 1

Firefox in version 19 and beyond by default applies an opacity of 40% (0.4) to placeholder text. Simply just add opacity: 1;

input:-moz-placeholder,
input::-moz-placeholder {
    opacity: 1 !important;
}