HtmlCss光标(插入符caret)透明隐藏光标 221106笔记

HtmlCss光标透明隐藏光标 221106笔记

光标有两种

1. 文字插入符光标(caret), 一闪一闪的竖线
2. 鼠标光标(cursor), 或者应该叫指针, 或叫鼠标指针

classDiagram
 
    光标--> caret
    光标 --> cursor
    
    class caret{
		文字光标
		或叫
		插入符光标
	}
	class cursor{
	鼠标光标
	或叫
	鼠标指针	
	}
	
 

这里说的是文字插入符光标(caret), 一闪一闪的竖线

caret的一种记忆方式 car >>> care >>> caret

HtmlCss光标透明隐藏光标 可以用css的 caret-color:transparent;

caret-color:transparent;

• caret-color 插入夫光标的颜色
• • transparent 透明
• • red 红色
• • blue 蓝色
• • black 黑色
• • purple 紫色

caret-color:transparent; .Sty010{font-size:60px; } .Sty010>div{ border:1px solid black; box-shadow:3px 3px 6px black; margin-bottom:20px; }

<section style="font-size:66px; text-shadow:3px 3px 6px black; background-color:#ddeeff; box-shadow:5px 5px 8px black; margin-bottom:30px;">
	<div>文字插入符光标透明</div>
	<header><b><code style="font-size:88px; color:red;">caret-color:transparent;</code></b></header>
</section>

<section class=Sty010 >
<style>
	.Sty010{font-size:60px; }
	.Sty010>div{ border:1px solid black;  box-shadow:3px 3px 6px black; margin-bottom:20px; }

</style>
<div>没有设置 caret-color</div>
<div style="caret-color:transparent; "> 插入符光标透明 caret-color:transparent </div>
<div style="caret-color:red; "> 插入符光标红色 caret-color:red </div>
<div style="caret-color:purple; "> 插入符光标紫色 caret-color:purple </div>

</section>

<section style="font-size:66px; text-shadow:3px 3px 6px black; background-color:#ddeeff; box-shadow:5px 5px 8px black; margin-bottom:30px;"> <div>文字插入符光标透明</div> <header><b><code style="font-size:88px; color:red;">caret-color:transparent;</code></b></header> </section>

<section class=Sty010 > <style> .Sty010{font-size:60px; } .Sty010>div{ border:1px solid black; box-shadow:3px 3px 6px black; margin-bottom:20px; }

</style> <div>没有设置 caret-color</div> <div style="caret-color:transparent; "> 插入符光标透明 caret-color:transparent </div> <div style="caret-color:red; "> 插入符光标红色 caret-color:red </div> <div style="caret-color:purple; "> 插入符光标紫色 caret-color:purple </div>

</section>