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

【问题标题】：When an Input is active, the placeholder's opacity or color changes当输入处于活动状态时，占位符的不透明度或颜色会发生变化
【发布时间】：2016-01-14 17:22:26
【问题描述】：

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

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

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

【问题讨论】：

.input-borderless:focus{opacity:0.5}

标签： javascript jquery html css input

【解决方案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>

【讨论】：

太棒了。谢谢！如果选择了输入，您是否知道如何让文本显示在输入下？对于您创建的 sn-p 中的示例，在该行下“例如：名字和姓氏”在选择时显示在输入下方。