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

Question

我有以下输入字段，我在上面应用了一些 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, alongside with the :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 添加到你的规则中。

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

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

Keep transition state when input field contains text - CSS3

html

css

css-transitions