"Code Snippets" how to use CSS to quickly define colorful cursors

For web development, we often see the components and elements that need to be imported, such as textarea, or editable div (contenteditable), if you have ever thought about modifying the cursor color in a related way, this technique is a small share, You should never have missed it, huh?

Use the following CSS code to achieve the cursor color settings

Css

    Input,    textarea,    [contenteditable] {      caret-color:orange;    }

Related HTML

  <input type= "text" placeholder= "Mail" >  <br><br>  <textarea name= "comments" id= "" cols= "30 "Rows=" ></textarea>  <br><br>  <div contenteditable>igeekbar.com-please click on my </ Div>

Online Demo

Address: http://www.igeekbar.com/igclass/code/c986f33e-c8af-482d-ad98-984dbacbad60.htm

If you want to play better, you can have your cursor support multiple color changes in the input box.

CSS Code

  @keyframes Rainbow {    0% {caret-color:red;}    20% {caret-color:orange;}    40% {caret-color:yellow;}    60% {caret-color:green;}    80% {caret-color:blue;}    100% {caret-color:purple;}  }  input {    padding:10px;    font-size:18px;    width:80%;    Caret-color:orange;    Display:block;    Margin-bottom:. 5em;  }  Input:focus {    animation:3s infinite Rainbow;  } body {    background-color:orange;  }

The above code uses Keyframe to generate animation effects, and then set to the Input:focus property, so that the user clicks the input box, will generate a different cursor color, very interesting, we are interested to click the following link to try

Online Demo: http://www.igeekbar.com/igclass/code/148e9cb3-61be-4954-9447-c931eb4e7c4d.htm

is not a bit of meaning, if you have more fun cursor CSS effect, please immediately message and I share, thank you read ~ ~

"Code Snippets" how to use CSS to quickly define colorful cursors