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

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

光标有两种

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

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

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

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

caret-color:transparent;

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

文字插入符光标透明

caret-color:transparent;

没有设置 caret-color

插入符光标透明 caret-color:transparent

插入符光标红色 caret-color:red

插入符光标紫色 caret-color:purple

<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>