时间戳

首页 > 解决方案 > 占位符在 Chrome 和 Safari 中不起作用，但在 Firefox 中起作用

html - 占位符在 Chrome 和 Safari 中不起作用，但在 Firefox 中起作用

问题描述

我今天遇到了这个问题。我正在为我的搜索框使用占位符。我必须保持透明，直到它集中。它在 Firefox 上运行良好。但是 Chrome 和 Safari 在聚焦时不会显示这个占位符。

#sv2 input:-moz-placeholder {
  color: transparent
}

#sv2 input::-webkit-input-placeholder {
  color: transparent
}

input[type=search]:focus {
  width: 130px;
  background-color: #fff;
  border-color: #66cc75;
  -webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
  -moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
  box-shadow: 0 0 5px rgba(109, 207, 246, .5)
}
<form method="get" action="https://www.example.com/" id="sv2">
  <input name="s" id="s" size="30" type="search" placeholder="Search example.com">
</form>

感谢您的帮助和时间！

标签： htmlcss

解决方案

您可以只使用::placeholder样式输入文本的占位符。所有现代浏览器都应该支持这一点。

由于这一点，并且box-shadow道具是标准化的，最新版本的浏览器不应该需要这些规则的供应商前缀。

#sv2 input::placeholder {
  color: transparent
}

#sv2 input:focus::placeholder {
  color: gray
}

input[type=search]:focus {
  background-color: #fff;
  border-color: #66cc75;
  box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}
<form method="get" action="https://www.example.com/" id="sv2">
  <input name="s" id="s" size="30" type="search" placeholder="Search example.com">
</form>

推荐阅读