Font size and color setting of input placeholder under IE

  1. first of all, IE9 does not support the placeholder attribute;
  2. placeholder under IE10 and Edge cannot set color and size;

but after reading the registration of Xiaomi"s official website, it is OK to ask how to achieve placeholder compatibility above IE9+

.
Mar.04,2021

forge placeholder, with label tags and disappear when onfocus


Pure HTML+CSS, seems to be better than placeholder attribute compatibility, although it is not perfect ~ / p >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .input {
      width: 169px;
      -webkit-appearance: textfield;
      background-color: white;
      -webkit-rtl-ordering: logical;
      cursor: text;
      padding: 1px;
      border-width: 2px;
      border-style: inset;
      border-color: initial;
      border-image: initial;
      text-rendering: auto;
      color: rgb(128, 114, 114);
      letter-spacing: normal;
      word-spacing: normal;
      text-transform: none;
      text-indent: 0px;
      text-shadow: none;
      text-align: start;
      margin: 0em;
      font: 400 13.3333px Arial;
    }
    .input:empty:not(:focus)::before {
      content: attr(data-placeholder);
    }
  </style>
</head>
<body>

  <div class="input" contenteditable data-placeholder=""></div>

  <input type="text" placeholder="" />

</body>
</html>
Menu