【代碼片段】如何使用CSS來快速定義多彩光標
對于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效果,請立刻留言和我分享,感謝閱讀~~
歡迎訪問GBin1.com


浙公網安備 33010602011771號