保持输入占位符始终可见 [英] Keep input placeholder always visible

问题描述

我试图在我的网站中设置所有输入的样式，当他们有一个值或有焦点时，palceholder成为输入的标题（它移动到输入的顶部）但是默认行为当有数据时，浏览器会隐藏占位符。

I am trying to style all the inputs in my website in a way that when they have a value or have focus the palceholder becomes the title of the input (it moves to the top of the input) but the default behavior of the browser hides the placeholder when there is data on it.

我真的想远离JS解决方案。

I really want to stay away from JS solutions.

当前结果：

我的css：

input:focus::-webkit-input-placeholder {
    transform: translate(-1rem,calc(-100% - 0.8rem));
    font-size: 0.9rem !important;
    opacity: 1 !important; //this doesnt seem to keep the placeholder visible
    display:block !important; //this doesnt seem to keep the placeholder visible
}

input::-webkit-input-placeholder{
    display:block !important; //this doesnt seem to keep the placeholder 
    opacity: 1 !important;  //this doesnt seem to keep the placeholder 
  } 

推荐答案

只能使用占位符来完成。这是样本。

It cant be done using just the placeholder. Here is sample.

body {
  padding: 25px 10px
}
* {
  margin: 0
}
.fieldOuter {
  position: relative;
  margin: 0 0 30px 0;
  font-family: impact;
  font-size: 16px
}
.fieldOuter input {
  padding: 10px;
  width: 250px;
  transition: all 1s;
  border: 2px solid #999;
  font-size: 17px;
  color: #666
}
.fieldOuter label {
  position: absolute;
  left:0px;
  top: 0;
  line-height:15px;
  transition: all 0.5s;
  overflow: hidden;
  color: #999;
  white-space: nowrap;
  z-index: 1;
  opacity: 0;
}
.fieldOuter input:focus + label {
  opacity: 1;
  top: -18px;  
}
.fieldOuter input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
}

<div class="fieldOuter">
<input id="Name" placeholder="Name" type="text" />
  <label for="Name">Name</label>
</div>
<div class="fieldOuter">
<input id="LastName" placeholder="Last Name" type="text" />
  <label for="LastName">Last Name</label>
</div>

这篇关于保持输入占位符始终可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！