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

我已经开始设计标签的样式，让它看起来像一个占位符(通过绝对定位坐在输入中)，并且可以在动作时移动。我的问题是，我不知道我是否能够通过css来定位标签。

我在WordPress上使用的是Contact Form 7，所以生成了该表单。我可以添加 Package 元素(如标签的跨度)，但不能删除输入周围的跨度。因此，像INPUT~LABEL这样的CSS规则在这里不起作用。

对于针对这一点的非css解决方案或有效的css方式，有什么建议吗？如果可能的话，我想保留‘标签’标签，这样表单就符合可访问性标准。

我的代码是：

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>