Сделать метку css, пока ввод находится в фокусе

Question

У меня есть форма, использующая Bulma, и я хочу иметь возможность применять те же классы CSS к метке, что и к входам, когда она находится и не в фокусе.

<div class="form-inputs">
    <label class="label is-capitalized">Headline One</label>
    <div class="field">
        <div class="control has-icons-right is-expanded">
            <input type="text" class="input ad-input" >
            <span class="icon is-small is-right">
                <i>5</i>
            </span>
        </div>
    </div>
</div>

Настройка jsfiddle: https://jsfiddle.net/21wemLrg/2/

Answer 1

вы можете решить это, используя небольшой скрипт js / jquery, например:

 $("input").focus(function() {
   $("label").addClass("input ad-input"); 
 });

 $("input").focusout(function () {
   $("label").removeClass("input ad-input");
 });

Answer 2

Есть способ достичь этого с чистым CSS, вам нужно будет изменить разметку, хотя https://jsfiddle.net/RACCH/vgdpucax/1/

<div class="form-inputs">

  <div class="field">
    <div class="ad-input-container control has-icons-right is-expanded">
      <input type="text" class="input ad-input" >
      <span class="icon is-small is-right">
        <i>5</i>
      </span>
      <label class="label is-capitalized">Headline One</label>
    </div>
  </div>
</div>

Css:

.ad-input-container {
  display:flex;
  flex-direction: column;
}
.ad-input-container .label {
  order: -1;
}

.ad-input:hover ~ .label, .ad-input:focus ~ .label, .ad-input:active ~ .label {
  color:red;
  /* my custom css for the label */
}
.ad-input-container.control.has-icons-right .icon{
  top:25px;
}

Идея состоит в том, чтобы установитьВаш ярлык после ввода, таким образом вы можете выбрать свой ярлык с помощью селектора ~, как только ваш ввод будет сфокусирован ...

Вы также можете использовать flex, чтобы изменить порядок отображения ярлыка ...

Answer 3

Включите это в свой JavaScript:

document.querySelector('input').addEventListener('focus',(e)=>{
    document.querySelector('label').classList = '//css classes that you wish to apply';
});

document.querySelector('input').addEventListener('blur',(e)=>{
    document.querySelector('label').classList = '//css classes when the input loses focus';
});