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和: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添加到您的身上。

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

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

2 个答案: