首先IE9不支持placeholder属性； IE10和Edge下的placeholder设置不了颜色和大小；但是看了小米官网的注册就是可以的，请问如何做到IE9+以上的placeholder兼容性

IE下input placeholder的字体大小及颜色设置

StevenLiu

12282331

发布于
2018-03-17

首先IE9不支持placeholder属性；
IE10和Edge下的placeholder设置不了颜色和大小；

但是看了小米官网的注册就是可以的，请问如何做到IE9+以上的placeholder兼容性

css3

html5 javascript

阅读 4k

2 个回答

得票最新

double

发布于
2018-03-18

新手上路，请多包涵

用label标签伪造出placeholder，当onfocus时消失即可

zifengb

40826

发布于
2018-04-22

纯HTML+CSS，貌似比placeholder属性兼容还好?,虽然还不够完美~

<!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>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

IE下input placeholder的字体大小及颜色设置

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

IE下input placeholder的字体大小及颜色设置

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？