Is there a way to not change the weight of placeholder's font when input is focused?

HTML & CSS
1

Here’s the bin. (Codepen throws 504 atm.)

The weight of font doesn’t change on Chrome while it does on Firefox. I’m also using Bootstrap 4.4.1, it works when using later versions. But is there a way to prevent the font weight from changing without changing the BS version?

2

I didn’t notice any difference in my Firefox with the code you posted.

I have read that Firefox adjusts the opacity so you may want to have a play around with something like this:

input::-moz-placeholder {
  /* Firefox 18- */
  color: red !important;
  opacity: 1 !important;
  font-weight: normal !important;
}

input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: red !important;
  opacity: 1 !important;
  font-weight: normal !important;
}
input::-moz-placeholder {
  /* Firefox 19+ */
  color: red !important;
  opacity: 1 !important;
  font-weight: normal !important;
}
input::-ms-input-placeholder {
  /* IE 10+ */
  color: red !important;
  opacity: 1 !important;
  font-weight: normal !important;
}
input::-moz-placeholder {
  /* Firefox 18- */
  color: red !important;
  opacity: 1 !important;
  font-weight: normal !important;
}

input::placeholder {
  /* non prefixed version */
  color: red !important;
  opacity: 1 !important;
  font-weight: normal !important;
}

I used !important because I couldn’t be certain to match the specificity of your original rules. (However you should be able to do that in a real situation and then lose the !important.)

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.