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

将此包含在您的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';
});

Answer 2

您可以使用像这样的小型js / jquery脚本解决此问题：

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

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

Answer 3

有一种方法可以通过纯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更改标签显示的顺序...

输入焦点对准标签时更改css

3 个答案: