html - 当输入字段包含文本时保持过渡状态 - 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>