Html 如何在不更改文本颜色的情况下更改光标颜色？

How to change cursor color without changing text color?

提问by AndrewFerrara

I want to have the cursor #FFFwhile my font is #000.

我想#FFF在我的字体是#000.

Is that possible?

那可能吗？

回答by alex

You can make a custom one.

你可以定制一个。

input, textarea {
    cursor: url(cursor.cur);
}

回答by SpliFF

Yes it's easy. Set your font color normally then use a custom cursor.

是的，这很容易。正常设置字体颜色，然后使用自定义光标。

http://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/

http://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/

That does depend on wether the custom cursor can be color, I'm just assuming it can be.

这取决于自定义光标是否可以是颜色，我只是假设它可以。

回答by Dev Bhaskar

to change caret color CSSof input type text and textarea use below css

要改变插入颜色CSS输入类型的文本和下面的css textarea的使用

input,textarea {
     color: #8f0407;
     text-shadow: 0px 0px 0px #000 ;
     -webkit-text-fill-color: transparent ;
}

input::-webkit-input-placeholder,
     textarea::-webkit-input-placeholder {
     color: #ccc;
     text-shadow: none;
     -webkit-text-fill-color: initial;
}

Codepen Demo

代码笔演示

回答by Matthew Harrison

From the mozilla docs

来自 mozilla文档

/* Keyword values */
caret-color: auto;
caret-color: transparent;
caret-color: currentColor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

回答by Balvant Ahir

Try this

尝试这个

<style>
input {
  color: rgb(60, 0, 248);  /* change [input cursor color] by this*/
  text-shadow: 0px 0px 0px #D60B0B; /* change [input font] by this*/
  -webkit-text-fill-color: transparent;
}
</style>