选择输入时将标签上移-联系人表格7的CSS技巧

Question

我正在尝试创建一个显示占位符文本的可访问表单，但是当用户键入输入内容时，将其移到输入上方。

我首先通过设置标签样式来使它看起来像一个占位符（通过绝对定位将输入置于“内部”），并且可以根据需要进行移动。我的问题是我不知道是否能够通过CSS定位标签。

我在wordpress上使用联系表格7，因此生成了表格。我可以添加包装器元素（如标签的跨度），但是不能删除输入周围的跨度。因此，像input〜label这样的css规则在这里不起作用。

是否有针对非CSS解决方法或针对此问题的有效CSS方法的建议？如果可能的话，我想保留'label'标签，以便表单符合可访问性标准。

我的代码：

form.wpcf7-form p {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 7.5px;
    padding-left: 7.5px;
    flex: 0 0 50%;
    max-width: 50%;
}

form.wpcf7-form p label {
    width: 100%;
    position: relative;
}

form.wpcf7-form p label span.formlabel {
    position: absolute;
    top: .8rem;
    z-index: 10;
    left: 1rem;
}

.form-control {
    display: block;
    width: 100%;
    padding: .8rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #5D5D5D;
    background-clip: padding-box;
    border: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

<form method="post" class="wpcf7-form" novalidate="novalidate">

<p>
<label>
<span class="formlabel">Business Name</span>
<span class="wpcf7-form-control-wrap business-name">
<input type="text" name="business-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false">
</span> 
</label> 
</p>

<p>
<label> 
  <span class="formlabel">First Name</span>
  <span class="wpcf7-form-control-wrap first-name">
  <input type="text" name="first-name" value="" size="40"   class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false">
  </span> 
 </label> 
</p>

<p>
<label> 
<span class="formlabel">Last Name</span>
<span class="wpcf7-form-control-wrap last-name">
<input type="text" name="last-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false">
</span> 
</label> </p>

<p>
<label> 
  <span class="formlabel">Your Telephone</span>
  <span class="wpcf7-form-control-wrap your-tel">
<input type="tel" name="your-tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel form-control" aria-required="true" aria-invalid="false">
  </span> 
  </label> 
</p>

<p>
  <label> 
  <span class="formlabel">Your Email</span>
  <span class="wpcf7-form-control-wrap your-email">
  <input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control" aria-required="true" aria-invalid="false">
  </span> 
  </label> 
 </p>


<p><input type="submit" value="Place your request" class="wpcf7-form-control wpcf7-submit btn btn-primary"></p>

</form>

Answer 1

您可以使用focus-within进行管理

form.wpcf7-form p label:focus-within span.formlabel

等，

form.wpcf7-form p {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-top: 1.8rem;
  padding-right: 7.5px;
  padding-left: 7.5px;
  flex: 0 0 50%;
  max-width: 50%;
}

form.wpcf7-form p label {
  width: 100%;
  position: relative;
}

form.wpcf7-form p label span.formlabel {
  position: absolute;
  top: .8rem;
  z-index: 10;
  left: 1rem;
  white-space: nowrap;
  color: white;
  transition: all 1s ease;
}

form.wpcf7-form p label:focus-within span.formlabel {
  top: -1.8rem;
  color: red;
}

.form-control {
  display: block;
  width: 100%;
  padding: .8rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #5D5D5D;
  background-clip: padding-box;
  border: none;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

<form method="post" class="wpcf7-form" novalidate="novalidate">

  <p>
    <label>
<span class="formlabel">Business Name</span>
<span class="wpcf7-form-control-wrap business-name">
<input type="text" name="business-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false">
</span> 
</label>
  </p>

</form>