<p><span style="color: rgb(34, 34, 34); font-family: Consolas, "Lucida Console", "Courier New", monospace; font-size: 12px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"> 此方法主要是利用镂空属性，隐藏原本文字，再利用text-shadow改变字体的颜色，而光标的颜色不变</span></p><pre style="background-color:#262e37;color:#ffffff;font-family:'Consolas';font-size:11.3pt;"><span style="color:#f92672;">input</span>,<span style="color:#f92672;">textarea </span>{<br/> <span style="color:#66d9ef;font-style:italic;">color</span>: <span style="color:#66d9ef;">rgb</span>(<span style="color:#ae81ff;">60</span>, <span style="color:#ae81ff;">0</span>, <span style="color:#ae81ff;">248</span>); <span style="color:#5b7773;background-color:#22282e;">/* </span><span style="color:#5b7773;background-color:#22282e;font-family:'宋体';">光标的颜色</span><span style="color:#5b7773;background-color:#22282e;">*/</span><span style="color:#5b7773;"><br/></span><span style="color:#5b7773;"> </span><span style="color:#66d9ef;font-style:italic;">text-shadow</span>: <span style="color:#ae81ff;">0</span><span style="color:#68e868;font-weight:bold;">px </span><span style="color:#ae81ff;">0</span><span style="color:#68e868;font-weight:bold;">px </span><span style="color:#ae81ff;">0</span><span style="color:#68e868;font-weight:bold;">px </span><span style="color:#a6e22e;">#D60B0B</span>; <span style="color:#5b7773;background-color:#22282e;">/* </span><span style="color:#5b7773;background-color:#22282e;font-family:'宋体';">文本颜色</span><span style="color:#5b7773;background-color:#22282e;"> */</span><span style="color:#5b7773;"><br/></span><span style="color:#5b7773;"> </span><span style="color:#66d9ef;font-style:italic;">-webkit-text-fill-color</span>: <span style="color:#68e868;font-weight:bold;">transparent</span>;<br/>}<br/><span style="color:#5b7773;background-color:#22282e;">/*</span><span style="color:#5b7773;background-color:#22282e;font-family:'宋体';">此外下面的</span><span style="color:#5b7773;background-color:#22282e;">placeholder</span><span style="color:#5b7773;background-color:#22282e;font-family:'宋体';">改变颜色同样适用</span><span style="color:#5b7773;background-color:#22282e;">*/</span><span style="color:#5b7773;"><br/></span><span style="color:#f92672;">input</span>::<span style="color:#a6e22e;">-webkit-input-placeholder</span>{<br/> <span style="color:#66d9ef;font-style:italic;">color</span>: <span style="color:#66d9ef;">rgb</span>(<span style="color:#ae81ff;">60</span>, <span style="color:#ae81ff;">0</span>, <span style="color:#ae81ff;">248</span>); <span style="color:#5b7773;background-color:#22282e;">/* </span><span style="color:#5b7773;background-color:#22282e;font-family:'宋体';">改变</span><span style="color:#5b7773;background-color:#22282e;">placeholder</span><span style="color:#5b7773;background-color:#22282e;font-family:'宋体';">文本颜色</span><span style="color:#5b7773;background-color:#22282e;"> */</span><span style="color:#5b7773;"><br/></span><span style="color:#5b7773;"> </span><span style="color:#66d9ef;font-style:italic;">text-shadow</span>: <span style="color:#68e868;font-weight:bold;">none</span>;<br/> <span style="color:#66d9ef;font-style:italic;">-webkit-text-fill-color</span>: <span style="color:#68e868;font-weight:bold;">initial</span>;<br/>}</pre><p>来源：https://blog.csdn.net/qq_39234685/article/details/83180468</p>
相关文章
