我想出了如何更改占位符的不透明度和颜色,但我不确定当输入实际处于事件状态时如何更改它们。此外,我希望在输入处于事件状态时将文本放置在输入下方。
如何在输入处于事件状态时更改占位符元素的颜色/不透明度。当它处于事件状态时,请为输入下方的文本指明正确的方向。
.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>
最佳答案
我的建议是:
.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>
关于javascript - 当输入处于事件状态时,占位符的不透明度或颜色会发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34795812/