占位符：绝对不能使用负顶值

Question

我有一个输入，它有一个占位符。我已经成功地设置了占位符的样式，但是当我尝试将占位符移动到顶部时输入的焦点不起作用，我使用位置绝对值，顶部位置使用负值。

我的代码看起来是：

s

这是我的小提琴：https://jsfiddle.net/su2roqvc/2/

我失踪了什么？

Answer 1

#wrapper {
  padding:40px;
  position:relative;
}

input {
  position : relative;
}

input::-webkit-input-placeholder {
  color: red;
  position:absolute;
  transition: all 0.3s;
}

 
input:focus::-webkit-input-placeholder {
-ms-transform: translate(0, -20px);
   	-webkit-transform: translate(0, -20px); 
transform: translate(0, -20px);
color:blue;
}
input:focus::-moz-placeholder {
-webkit-transform: translate(0, -20px); 
transform: translate(0, -20px);
color: green;
}

<div id="wrapper">

  <input type="text" placeholder="Engkus Kusnadi">

</div>

我还不是100％使用css3，这在Firefox中不起作用，但在Chrome中你的占位符会弹出输入。

嗯，现在正在研究Firefox的等价物

*编辑 找到了一个可能对你有用的替代解决方案， 或导致解决方案。它适用于Chrome和Firefox！ 祝你好运

* {
  box-sizing: border-box;
}

html {
  font: 14px/1.4 Sans-Serif;
}

form {
  width: 320px;
  float: left;
  margin: 20px;
}
form > div {
  position: relative;
  overflow: hidden;
}
form input, form textarea {
  width: 100%;
  border: 2px solid gray;
  background: none;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 8px 12px;
  outline: 0;
}
form input:valid, form textarea:valid {
  background: white;
}
form input:focus, form textarea:focus {
  border-color: blue;
}
form input:focus + label, form textarea:focus + label {
  background: blue;
  color: white;
  font-size: 70%;
  padding: 1px 6px;
  z-index: 2;
  text-transform: uppercase;
}
form label {
  transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
  position: absolute;
  color: #999;
  padding: 7px 6px;
}
form textarea {
  display: block;
  resize: vertical;
}

form.go-up input, form.go-up textarea {
  padding: 12px 12px 12px 12px;
}
form.go-up label {
  top: 0;
  left: 0;
  width: 100%;
}
form.go-up input:focus, form.go-up textarea:focus {
  padding: 20px 6px 4px 6px;
}
form.go-up input:focus + label, form.go-up textarea:focus + label {
  top: 0;
  margin-top: 0px;
}

<form class="go-up">
  <h2>To Top</h2>
  <div>
    <input id="name" name="name" type="text" required>
    <label for="name">Your Name</label>
  </div>
  <div>
    <input id="phone" name="phone" type="tel" required>
    <label for="phone">Phone</label>
  </div>
  <div>
    <textarea id="message" name="phone" required></textarea>
    <label for="message">Email</label>
  </div>
</form>

Answer 2

您可以使用labels，它可以在所有浏览器中使用！

<强> Upgate

添加了js以获得更好的行为。

＆＃13;

＆＃13;

var fields = $('.js-field');

fields.each(function() {
  var input = $(this).find('input');
  var placeholder = $(this).find('span');
  
  input.on('blur', function() {
    $(this).val() == "" 
      ? placeholder.show() 
      : placeholder.hide();
  });
  
  input.on('focus', function() {
    placeholder.show() 
  });
});

＆＃13;

label {
    display: block;
    width: 200px;
    position: relative;
    padding-top: 20px;
    margin-top: 20px;
}
input {
    height: 30px;
    width: 100%;
    border: 1px solid black;
    padding: 5px;
    box-sizing: border-box;    
}
span {
    position: absolute;
    display: block;
    top: 20px;
    left: 5px;
    color: red;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 30px;
    transition: .3s ease;
}
input:focus + span {
    transform: translateY(-100%);
    color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="js-field">
  <input>
  <span>Placeholder1</span>
</label>
<label class="js-field">
  <input>
  <span>Placeholder2</span>
</label>

＆＃13;

＆＃13;

＆＃13;

Answer 3

至于@ 3rdthemagic已经说过没有支持。 我建议你尝试使用标签，跨度或伪元素。 Tympanus有一些很好的例子。祝你好运;）

Answer 4

您无法在top中使用bottom left right ::-webkit-input-placeholder。你可以使用这种风格：

• 字体属性
• 颜色
• 背景属性
• 字间距
• 字母间距
• 文字修饰 ...垂直对齐 -text变换 -line高度 -text缩进 -opacity

您可以使用input:focus[placeholder]。

#wrapper {
  padding:40px;
  position:relative;
}

input {
  position : relative;
}

input::-webkit-input-placeholder {
  color: red;
}

input:focus[placeholder] {
  top:-20px;
  color:blue;
}

<div id="wrapper">

  <input type="text" placeholder="Engkus Kusnadi">

</div>

Answer 5

您可以使用行高来移动文本，此代码将支持其他浏览器

＆＃13;

＆＃13;

#wrapper {
  padding:40px;
  position:relative;
}

input {
  position : relative;
}
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: red;
  position:absolute;}
input::-moz-placeholder { /* Firefox 19+ */
  color: red;
  position:absolute;}
input:-ms-input-placeholder { /* IE 10+ */
  color: red;
  position:absolute;}
input:-moz-placeholder { /* Firefox 18- */
  color: red;
  position:absolute;
}
input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   line-height:1px;
   color:blue;
}
input:focus::-moz-placeholder { /* Firefox 19+ */ 
   line-height: 1px;
   color:blue;
}
input:focus:-ms-input-placeholder { /* IE 10+ */
   line-height:1px;
   color:blue;
}
input:focus:-moz-placeholder { /* Firefox 18- */
   line-height:1px;
   color:blue;
  
}

＆＃13;

<div id="wrapper">

  <input type="text" placeholder="Engkus Kusnadi">

</div>

＆＃13;

＆＃13;

＆＃13;