輸入處於活動狀態時，占位符的不透明度或顏色會更改

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>