HTML to Contact form 7 - styles not displaying correctly

All code: https://codepen.io/yarikltv/pen/wvjrZGg

Code before:

<div class="user-box">
    <input type="text" name="" required="">
    <label>Full name*</label>
</div>

Code in Contact Form 7:

<div class="user-box">
[text text-45]
<label>Full name*</label>
</div>

And how it displays as HTML:

<div class="user-box">
  <span class="wpcf7-form-control-wrap" data-name="text-45">
    <input type="text" name="text-45" value="" size="40" class="wpcf7-form-control wpcf7-text" id="fullName" aria-invalid="false">
  </span><br>
  <label for="fullName">Full name*</label>
</div>

i think that theese css strings are main in this mistake:

.contact-us .user-box input:focus ~ label,
.contact-us .user-box input:valid ~ label{
    top: 0;
    left: 0;
    color: #17BEBE;
    font-size: 14px;
}

.contact-us textarea:focus + label,
    .contact-us textarea:not(:placeholder-shown) + label {
    top: -5px;
    left: 0;
    color: #17BEBE;
    font-size: 14px;
}

::-webkit-input-placeholder {
  opacity: 0;
}

.contact-us textarea:focus::-webkit-input-placeholder {
  opacity: 1;
}

What to do, to make it work as html?