How to change style of placeholder in textbox

June 2, 2018 XpertPhp Comments 1 comment

Today, we will learn how to custom change in placeholder using style. CSS through we can change in text placeholder like as font-color, font-size, and font-weight.

Different pseudo selectors are used in different browsers such as Chrome, Safari, and Opera for used to “-webKit-input-placeholder” pseudo selectors, Firefox for used to “-moz-placeholder” pseudo selectors and IE 10+ for used to “-ms-input-placeholder” pseudo selectors.

custom style doing it in placeholder then textbox look will be attractive. in this below example help through you can change in placeholder text.

/* Chrome, Safari, Opera */
::-webkit-input-placeholder {
  color: red;
  font-size: 13px;
}

/* Firefox */
::-moz-placeholder {
  color: red;
  font-size: 13px;
}

/* IE 10+ */
:-ms-input-placeholder {
  color: red;
  font-size: 13px;
}
::placeholder {
  color: red;
  font-size: 13px;
}

/* Chrome, Safari, Opera */

::-webkit-input-placeholder {

color: red;

font-size: 13px;

}

/* Firefox */

::-moz-placeholder {

color: red;

font-size: 13px;

}

/* IE 10+ */

:-ms-input-placeholder {

color: red;

font-size: 13px;

}

::placeholder {

color: red;

font-size: 13px;

}

Please follow and like us: