javascript - 当输入处于事件状态时，占位符的不透明度或颜色会发生变化

Question

我想出了如何更改占位符的不透明度和颜色，但我不确定当输入实际处于事件状态时如何更改它们。此外，我希望在输入处于事件状态时将文本放置在输入下方。

如何在输入处于事件状态时更改占位符元素的颜色/不透明度。当它处于事件状态时，请为输入下方的文本指明正确的方向。

.gray {
  background-color: #CCC;
  width: 100%;
  height: 200px;
}
.input-borderless {
  border-top: 0px;
  border-bottom: 2px solid green;
  border-right: 0px;
  border-left: 0px;
  background-color: #CCC;
  text-decoration: none;
  outline: none;
}
::-webkit-input-placeholder { /* Safari, Chrome and Opera */
  color: #000;
  opacity: 1;
}

:-moz-placeholder { /* Firefox 18- */
  color: #000;
  opacity: .7;
}

::-moz-placeholder { /* Firefox 19+ */
  color: orange;
}

:-ms-input-placeholder { /* IE 10+ */
   color: #000;
  opacity: .7;
}

::-ms-input-placeholder { /* Edge */
  color: #000;
  opacity: .7;
}
:placeholder-shown {
  color: #000;
  opacity: .7;
}

<div class="gray">
<input type="text" class="input-borderless" placeholder="Your Name">
</div>

Answer 1

我的建议是:

.gray {
  background-color: #CCC;
  width: 100%;
  height: 200px;
}
.input-borderless {
  border-top: 0px;
  border-bottom: 2px solid green;
  border-right: 0px;
  border-left: 0px;
  background-color: #CCC;
  text-decoration: none;
  outline: none;
}
::-webkit-input-placeholder { /* Safari, Chrome and Opera */
  color: #000;
  opacity: 1;
}

:-moz-placeholder { /* Firefox 18- */
  color: #000;
  opacity: .7;
}

::-moz-placeholder { /* Firefox 19+ */
  color: orange;
}

:-ms-input-placeholder { /* IE 10+ */
  color: #000;
  opacity: .7;
}

::-ms-input-placeholder { /* Edge */
  color: #000;
  opacity: .7;
}
:placeholder-shown {
  color: #000;
  opacity: .7;
}
:focus::-webkit-input-placeholder {
  color: blue;
  opacity: 0.5;
}
:-moz-placeholder:focus {
  color: blue;
  opacity: 0.5;
}
:-ms-input-placeholder:focus {
  color: blue;
  opacity: 0.5;
}

<div class="gray">
    <input type="text" class="input-borderless" placeholder="Your Name">
</div>