[Code Snippet] How to use CSS to quickly define colorful cursors

For web development, we often see components and elements that require input content, such as textarea, or editable DIV (contenteditable). If you have thought about modifying the cursor color in a related way, then this technique Small sharing, you should never miss it~

 

---

 

Use the following CSS code to set the cursor color

 

CSS

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

 

Related HTML

  <input type="text" placeholder="邮件">
  <br><br>
  <textarea name="comments" id="" cols="30" rows="10"></textarea>
  <br><br>
  <div contenteditable>igeekbar.com - please click me</div>

 

online demo

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

 

---

 

If you want to be more fun, you can make 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 it to the input:focus attribute, so that when the user clicks on the input box, different cursor colors will be generated. It is very interesting. If you are interested, you can click the link below to try it out.

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

Isn't it interesting? If you have a more interesting cursor CSS effect, please leave a message and share it with me immediately, thank you for reading~~