一.

input{
	color:red;
}

逛遍和字体颜色都会变红

二.

input{
	caret-color:red;  //css3属性
}

可能会有兼容性问题

三. 此方法主要是利用镂空属性，隐藏原本文字，再利用text-shadow改变字体的颜色，而光标的颜色不变

input,textarea { 
   color: rgb(60, 0, 248); /* 光标的颜色*/ 
   text-shadow: 0px 0px 0px #D60B0B; /* 文本颜色 */ 
   -webkit-text-fill-color: transparent;
} 
/*此外下面的placeholder改变颜色同样适用*/
input::-webkit-input-placeholder{
    color: rgb(60, 0, 248); /* 改变placeholder文本颜色 */
    text-shadow: none;
    -webkit-text-fill-color: initial; 
 }

改变光标的位置可以用padding解决  具体修改5px的值

input{
    padding: 5px 0px;
}

分享到：

打赏