当输入字段包含文本时保持过渡状态 - CSS3

Question

Fiddle here

我在以下输入字段上应用了一些 CSS 转换：

<input type="text" id="input-text" class="both input-text">

<label id="test" for="input-text" class="label-text-first"></label>
<label id="test" for="input-text" class="label-text-second"></label>
<label id="test" for="input-text" class="both label-text-placeholder"></label>

我的问题是，如果输入字段包含文本，我想保持过渡状态，否则允许返回到原始位置。

这可以通过纯 CSS3 实现还是我需要 javascript？

Answer 1

实际上使用required attribute 和:valid 伪选择器，我们可以用纯CSS 做到这一点，如下所示：

html {
  background-color: #43394a;
  color: #555;
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
label,
input {
  position: absolute;
  width: 15%;
  height: 15%;
  top: 50%;
  left: 50%;
  border: 2px solid white;
}
.label-text-first {
  transform: translate(-100%, -50%);
  -webkit-transform: translate(-100%, -50%);
  -moz-transform: translate(-100%, -50%);
  border: 0.4vw solid #9686a2;
  border-right: none;
  transition: left 0.4s;
  -webkit-transition: left 0.4s;
  -moz-transition: left 0.4s;
}
.label-text-second {
  transform: translate(-0%, -50%);
  -webkit-transform: translate(-0%, -50%);
  -moz-transform: translate(-0%, -50%);
  border: 0.4vw solid #9686a2;
  border-left: none;
  transition: left 0.4s;
  -webkit-transition: left 0.4s;
  -moz-transition: left 0.4s;
}
.both {
  width: 28%;
  height: 12%;
  text-align: center;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  background-color: transparent;
  outline: none;
  border: none;
  font-size: 2.0vw;
  font-weight: bold;
  color: #9686a2;
}
.label-text-placeholder {
  z-index: 8888;
  transition: transform 0.4s;
  -webkit-transition-property: transform;
  -webkit-transition-duration: 0.4s;
  -moz-transition: transform 0.4s;
}
.label-text-placeholder:before {
  display: block;
  content: 'First Name';
  line-height: 12.0vh;
}
.input-text:focus ~ .label-text-first,.input-text:valid ~ .label-text-first {
  left: 49%;
  transition: left 0.4s;
  -webkit-transition: left 0.4s;
  -moz-transition: left 0.4s;
}
.input-text:focus ~ .label-text-second,.input-text:valid  ~ .label-text-second{
  left: 51%;
  transition: left 0.4s;
  -webkit-transition: left 0.4s;
  -moz-transition: left 0.4s;
}
.input-text:focus ~ .label-text-placeholder,.input-text:valid  ~ .label-text-placeholder {
  transform: translate(-50%, 65%);
  -webkit-transform: translate(-50%, 65%);
  -moz-transform: translate(-50%, 65%);
  transition: transform 0.4s;
  -webkit-transition: transform 0.4s;
  -moz-transition: transform 0.4s;
}

<form>
<input type="text" id="input-text" class="both input-text" required>

<label id="test" for="input-text" class="label-text-first"></label>
<label id="test" for="input-text" class="label-text-second"></label>
<label id="test" for="input-text" class="both label-text-placeholder"></label>
</form>

Answer 2

试试这个fiddle

它是用纯 css 完成的。

您需要像这样在输入中添加必需的属性：

<input type="text" id="input-text" class="both input-text" required>

并在您的 CSS 中添加以下规则：

.input-text:focus ~ .label-text-first, .input-text:valid ~ .label-text-placeholder {
    left: 49%;
    transition: left 0.4s;
    -webkit-transition: left 0.4s;
    -moz-transition: left 0.4s;
}

.input-text:focus ~ .label-text-second, .input-text:valid ~ .label-text-placeholder{
    left: 51%;
    transition: left 0.4s;
    -webkit-transition: left 0.4s;
    -moz-transition: left 0.4s;
}

.input-text:focus ~ .label-text-placeholder, .input-text:valid ~ .label-text-placeholder {
    transform: translate(-50%, 65%);
    -webkit-transform: translate(-50%, 65%);
    -moz-transform: translate(-50%, 65%);
    transition: transform 0.4s;
    -webkit-transition: transform 0.4s;
    -moz-transition: transform 0.4s;
}

通知

我刚刚将这条规则 .input-text:valid ~ .label-text-placeholder 添加到您的规则中。

只要占位符无效（即为空），此规则就会将占位符放置在输入文本中。否则会在输入下。