【程式碼片段】如何使用CSS來快速定義多彩游標

來源:互聯網
上載者:User

標籤:padding   jpg   組件   textarea   blank   bsp   和我   animation   www.   

對於web開發中,我們經常都看得到需要輸入內容的組件和元素,比如,textarea,或者可編輯的DIV(contenteditable) ,如果你也曾思考過使用相關方式修改一下游標顏色的,那麼這篇技術小分享,你絕對不應該錯過哈~

 

 

使用如下的CSS代碼即可實現游標顏色的設定

 

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

 

相關HTML
  <input type="text" placeholder="郵件">  <br><br>  <textarea name="comments" id="" cols="30" rows="10"></textarea>  <br><br>  <div contenteditable>igeekbar.com - 請點擊我</div>

 

線上示範

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

 

 

如果想更好玩的話,可以讓你的游標在輸入框中支援多顏色變化

 

CSS代碼
  @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;  }

以上代碼使用keyframe來產生動畫效果,再設定為input:focus屬性中,這樣使用者點擊輸入框,都會產生不同的游標顏色, 非常有趣,大家有興趣可以點擊下面連結嘗試一下

線上示範:http://www.igeekbar.com/igclass/code/148e9cb3-61be-4954-9447-c931eb4e7c4d.htm

是不是有點意思, 如果大家有更好玩的游標CSS效果,請立刻留言和我分享,感謝閱讀~~

【程式碼片段】如何使用CSS來快速定義多彩游標

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: