Question

我正在尝试仅使用HTML和CSS重新创建a pretty cool placeholder UI，而我几乎得到了它（demo）。但是，如果您在输入字段中键入内容并使用选项卡将焦点放在下一个上，那么您刚输入值的那个将在Safari（6.0.5）和MobileSafari（iOS 6.1）中略微偏移。它在Chrome（30）中运行良好。

重现：

关注'价格'输入字段
输入值
选项卡以关注下一个输入字段
在表格自食时观看和惊奇

所以问题是：造成这种情况的原因是什么？如何解决？

注意：我真的非常关心如何在MobileSafari中使用它，除此之外的任何东西都是奖励。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <input name="title" type="text" placeholder="Title">
  <input name="price" type="text" placeholder="Price">
  <input name="location" type="text" placeholder="Specific location (optional)">
  <textarea name="desc" rows='4' placeholder="Description"></textarea>
</body>
</html>

CSS

* {
  box-sizing: border-box; 
}

body {
  padding: 0;
  margin: 0;
  font-size: 0;
}

input, textarea {
  position: relative;
  display: inline-block;
  margin: 0;
  outline: none;
  border: 0;
  border-radius: 0;
  padding: 2pt 4pt;
  padding-top: 8pt;
  font-family: "Helvetica Neue";
  font-size: 14pt;
  font-weight: lighter;
}

::-webkit-input-placeholder {
  color: lightgrey;
  position: relative;
  top: 0;
  left: 0;
  -webkit-transition-property: top, color;
  -webkit-transition-duration: .1s;
          transition-property: top, color;
          transition-duration: .1s;
}


::-webkit-input-placeholder[style*=hidden] {
  color: rgb(16,124,246);
  font-size: 8pt;
  font-weight: normal;
  top: -8pt;
  opacity: 1;
  visibility: visible !important;
}

[name=title] {
  width: 100%;
  border-bottom: 1px solid lightgrey;
  margin-bottom: 1px;
}

[name=price] {
  width: 30%;
  margin-bottom: 1px;
  border-bottom: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
}

[name=location] {
  width: 70%;
  border-bottom: 1px solid lightgrey;
}

[name=desc] {
  width: 100%;
}

Answer 1

将此添加到input和textarea元素可以解决问题：

float: left;

在Safari Version 6.0.5（8536.30.1）和Mobile Safari

上测试

Answer 2

我在Twitter上回复了你，但我也会在这里发布一个链接：这可以通过输入+标签而不是输入+占位符来完成。 http://codepen.io/jordanoaragao/pen/teqFw

已在此处实施：http://womensenterprisecenter.com/

Answer 3

似乎占位符属性无法设置动画。 So I made一个假的占位符，并为此动画。不幸的是，如果您只使用CSS，如果您保留输入，动画将会消失。所以我添加了一些JS-magic来触发动画。

在Safari中跳转输入字段

HTML

CSS

3 个答案: