Question

我在一个绝对位置div内有两个输入框。还有那些输入框上的标签。我想要的效果是当我聚焦一个输入框时，标签应该是蓝色，当模糊时应该删除类（蓝色）。同时也是另一个标签和输入框。

＆＃13;

// Initial color of label
label.labels{
  color: black;
}

input.box{
  border-width: 0 0 2px 0;
  outline: none;
}

＆＃13;

<div style = "position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
  <label class = "labels">First Name:</label>
  <input type = "text" class = "box" /><br />
  <label class = "labels">Last Name:</label>
  <input type = "text" class = "box" />
</div>

＆＃13;

当我对input.box进行聚焦时，label.labels颜色应为蓝色。而且，输入和两个标签都有相同的类。如何使用Pure Javascript实现此效果？或者如果可能的话请告诉我如何用css实现这个目标？

Answer 1

使用:focus-within伪元素的css解决方案。请注意，IE / Edge不支持此功能。

您需要打包每个label和input对才能实现此目的。

＆＃13;

// Initial color of label
label.labels {
  color: black;
}

input.box {
  border-width: 0 0 2px 0;
  outline: none;
}

.field:focus-within .labels {
  color: blue;
}

＆＃13;

<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
  <div class="field">
    <label class="labels">First Name:</label>
    <input type="text" class="box" /><br />
  </div>
  <div class="field">
    <label class="labels">Last Name:</label>
    <input type="text" class="box" />
  </div>
</div>

＆＃13;

Answer 2

以下是使用纯Javascript的解决方案：

function toggleClass() {
  this.previousElementSibling.classList.toggle('imblue');
}

var inputs = document.getElementsByClassName('box');

for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];

  input.addEventListener('focus', toggleClass);
  input.addEventListener('blur', toggleClass);
}

label.labels {
  color: black;
}

input.box {
  border-width: 0 0 2px 0;
  outline: none;
}

.imblue {
  color: blue !important;
}

<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
  <label class="labels">First Name:</label>
  <input type="text" class="box" /><br />
  <label class="labels">Last Name:</label>
  <input type="text" class="box" />
</div>

如何在纯javascript中更改输入焦点上的标签颜色？

2 个答案: