首页 > 编程学习 > HtmlCss光标(插入符caret)透明隐藏光标 221106笔记

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

光标有两种

  1. 文字插入符光标(caret), 一闪一闪的竖线
  2. 鼠标光标(cursor), 或者应该叫指针, 或叫鼠标指针
光标
caret
文字光标
或叫
插入符光标
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>

Copyright © 2010-2022 dgrt.cn 版权所有 |关于我们| 联系方式