0
<div class="form-item">
<p>      
<span class="wpcf7-form-control-wrap your-name">
   <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input_info wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="Name">
<span role="alert" class="wpcf7-not-valid-tip">Required field.</span></span> 
<label class="input-label"> Name </label>
</p>
</div>

label.input-label{
        position: absolute;
        left: 10px;
        top: 12px;
        transition: top 0.5s;
        font-weight: 300;
        font-size: 17px;
        opacity: 0.5;
    }

    .form-item {
        position: relative;
        // padding-top: 10px;
        // margin-bottom: 10px;
        input{
            padding-left: 12px;
            font-family: "Museo-Sans";
            font-weight: 300;
        }
    }


    input:focus+label,
    input:not(:placeholder-shown)+label,
    textarea:focus+label,
    textarea:not(:placeholder-shown)+label {
      top: 3px;
      font-size:12px;
    }

вот так я могу поднять label если бы не было бы span , то тогда поднимается , а мне эти спаны нужны , так как они были сгенерированы плагином, я через пхп пытаюсь убрать верхний , но заодно и внутри его тоже удаляется , а мне так не надо, крч надо как то поднимать в инпуте label при фокусе. помогите , как сделать ? Спасайте , срочно надо , пожайлуйста

пытаюсь при помощи jquery, но не выходит, он сразу всем лэйблам дает стиль , поднимает и возвращает обратно , когда актив пропал , но мне надо именно тому который имеено в этом спане , а не в других

function toggleInput(){
  if(this.value){
    jQuery(this).parent('.wpcf7-form-control-wrap').addClass('active');
  }else{
     jQuery(this).parent('.wpcf7-form-control-wrap').removeClass('active');
  }
  if (jQuery(".your-name.active")[0]){
      jQuery('.input-label').css({"top": "5px ", "font-size": "75%"});

   }else{
      jQuery('.input-label').css({"position": "absolute ", "left": "10px" , "top": "10px" , "transition": "top 0.5s", "font-weight": "300", "font-size": "17px", "opacity:": "0.5"});

   }
}
jQuery('.wpcf7-form-control-wrap input').each(toggleInput); //на случай предустановленного значения
jQuery('.wpcf7-form-control-wrap input').on('input',toggleInput);//при изменении

1 ответ 1

1

Нужные стили в анимации сам допишешь

$('input').focus(function() {
  const label = $(this).parent().parent().find('label')
  label.animate({
    'font-size': '30px'
  })
})

$('input').focusout(function() {
  const label = $(this).parent().parent().find('label')
  if ($(this).val()) return false;

  label.animate({
    'font-size': '15px'
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-item">
  <p>
    <span class="wpcf7-form-control-wrap your-name">
     <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input_info wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="Name">
      <span role="alert" class="wpcf7-not-valid-tip">Required field.</span>
    </span>
    <label class="input-label"> Name </label>
  </p>
</div>

<div class="form-item">
  <p>
    <span class="wpcf7-form-control-wrap your-name">
     <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input_info wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="Name">
      <span role="alert" class="wpcf7-not-valid-tip">Required field.</span>
    </span>
    <label class="input-label"> Name </label>
  </p>
</div>

8
  • а если не один input и лэбл? а таких конструкции 100000? он всем дает стили , а мне надо имеено тому по которому я кликнул , который в нужном спане
    – XXXXXX
    2 окт 2019 в 14:05
  • тоесть для 1000 инпутов и лэйблов 1000 классов ?
    – XXXXXX
    2 окт 2019 в 14:06
  • спасибо большое . твои код в разы меньше моего
    – XXXXXX
    2 окт 2019 в 14:16
  • XXXXXX, если помог ответ, то можно поставить галочку)
    – WVFFLIFE
    2 окт 2019 в 14:17
  • готово. сделано , спасибо вам огромное, вытащили
    – XXXXXX
    2 окт 2019 в 14:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.