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

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

我的建议是：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;