当前位置： 文江博客话题详情

设置文本输入插入符号的样式

发布于 2024-12-03 08:07:49 字数 69 浏览 0 评论 0原文

我想设置焦点 的插入符号的样式。具体来说，就是颜色和厚度。

原文

I want to style the caret of a focused <input type='text'/>. Specifically, the color and thickness.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（9）

梦开始←不甜 2024-12-10 08:07:49

“插入符”是您要查找的词。但我确实相信，它是浏览器设计的一部分，而不是在 CSS 的掌握范围内。

然而，这里有一篇关于使用 Javascript 和 CSS 模拟插入符号更改的有趣文章 http://www.dynamicdrive.com/forums/showthread.php?t=17450 对我来说这似乎有点老套，但可能是完成任务的唯一方法。文章的要点是：

我们将在屏幕视图之外的某个地方有一个纯文本区域
观众的，当用户点击我们的“假终端”时，我们将
将焦点集中到文本区域，当用户开始输入时，我们将简单地
将输入文本区域的数据附加到我们的“终端”，这就是
那个。

这里是一个正在运行的演示

2018年更新

有一个新的 css 属性 caret-color 其中适用于插入符输入或contenteditable区域。支持正在增长，但不是 100%，这只会影响颜色，不会影响宽度或其他类型的外观。

input{
  caret-color: rgb(0, 200, 0);
}
<input type="text"/>

'Caret' is the word you are looking for. I do believe though, that it is part of the browsers design, and not within the grasp of css.

However, here is an interesting write up on simulating a caret change using Javascript and CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 It seems a bit hacky to me, but probably the only way to accomplish the task. The main point of the article is:

We will have a plain textarea somewhere in the screen out of the view
of the viewer and when the user clicks on our "fake terminal" we will
focus into the textarea and when the user starts typing we will simply
append the data typed into the textarea to our "terminal" and that's
that.

HERE is a demo in action

2018 update

There is a new css property caret-color which applies to the caret of an input or contenteditable area. The support is growing but not 100%, and this only affects color, not width or other types of appearance.

input{
  caret-color: rgb(0, 200, 0);
}
<input type="text"/>

回复 原文
沦落红尘 2024-12-10 08:07:49

如果您使用的是 webkit 浏览器，您可以按照下一个 CSS 片段更改插入符号的颜色。我不确定是否可以使用 CSS 更改格式。

input,
textarea {
    font-size: 24px;
    padding: 10px;
    
    color: red;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: transparent;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color:
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

这是一个示例： http://jsfiddle.net/8k1k0awb/

If you are using a webkit browser you can change the color of the caret by following the next CSS snippet. I'm not sure if It's possible to change the format with CSS.

input,
textarea {
    font-size: 24px;
    padding: 10px;
    
    color: red;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: transparent;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color:
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

Here is an example: http://jsfiddle.net/8k1k0awb/

回复 原文
笔落惊风雨 2024-12-10 08:07:49

在 CSS3 中，现在有一种原生方法可以做到这一点，无需现有答案中建议的任何技巧： caret-color 属性。

您可以使用插入符执行很多操作，如下所示。它甚至可以动画。

/* Keyword value */
caret-color: auto;
color: transparent;
color: currentColor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

Firefox 55 和 Chrome 60 支持 caret-color 属性。Safari 技术预览版和 Opera 中也提供支持（但 Edge 中尚未提供）。您可以在此处查看当前支持表。

In CSS3, there is now a native way to do this, without any of the hacks suggested in the existing answers: the caret-color property.

There are a lot of things you can do to with the caret, as seen below. It can even be animated.

/* Keyword value */
caret-color: auto;
color: transparent;
color: currentColor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

The caret-color property is supported from Firefox 55, and Chrome 60. Support is also available in the Safari Technical Preview and in Opera (but not yet in Edge). You can view the current support tables here.

回复 原文
↙温凉少女 2024-12-10 08:07:49

以下是您可能要寻找的一些供应商

::-webkit-input-placeholder {color: tomato}
::-moz-placeholder          {color: tomato;} /* Firefox 19+ */
:-moz-placeholder           {color: tomato;} /* Firefox 18- */
:-ms-input-placeholder      {color: tomato;}

您还可以设计不同的状态，例如焦点

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

您还可以对其进行某些转换，例如

::-VENDOR-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
:focus::-VENDOR-input-placeholder  {text-indent: 500px; transition: text-indent 0.3s ease;}

Here are some vendors you might me looking for

::-webkit-input-placeholder {color: tomato}
::-moz-placeholder          {color: tomato;} /* Firefox 19+ */
:-moz-placeholder           {color: tomato;} /* Firefox 18- */
:-ms-input-placeholder      {color: tomato;}

You can also style different states, such as focus

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

You can also do certain transitions on it, like

::-VENDOR-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
:focus::-VENDOR-input-placeholder  {text-indent: 500px; transition: text-indent 0.3s ease;}
回复 原文
您的好友蓝忘机已上羡 2024-12-10 08:07:49

以这种方式将 color 属性与 -webkit-text-fill-color 一起使用就足够了：

    input {
        color: red; /* color of caret */
        -webkit-text-fill-color: black; /* color of text */
    }
<input type="text"/>

适用于 WebKit 浏览器（但不适用于 iOS Safari，其中仍使用系统颜色作为插入符）以及 Firefox。

-webkit-text-fill-color CSS 属性指定填充颜色
文本字符。如果未设置该属性，则该值
使用颜色属性。 MDN

所以这意味着我们使用文本填充颜色设置文本颜色，使用标准颜色属性设置插入符号颜色。在不受支持的浏览器中，插入符号和文本将具有相同的颜色 - 插入符号的颜色。

It is enough to use color property alongside with -webkit-text-fill-color this way:

    input {
        color: red; /* color of caret */
        -webkit-text-fill-color: black; /* color of text */
    }
<input type="text"/>

Works in WebKit browsers (but not in iOS Safari, where is still used system color for caret) and also in Firefox.

The -webkit-text-fill-color CSS property specifies the fill color of
characters of text. If this property is not set, the value of the
color property is used. MDN

So this means we set text color with text-fill-color and caret color with standard color property. In unsupported browser, caret and text will have same color – color of the caret.

回复 原文
草莓味的萝莉 2024-12-10 08:07:49
input{
  caret-color: rgb(0, 200, 0);
}
<input type="text"/>

input{
  caret-color: rgb(0, 200, 0);
}
<input type="text"/>

回复 原文
错々过的事 2024-12-10 08:07:49

您可以通过一些 hack 调整来“设计”插入符号输入...在此示例中，插入符号被“替换”为具有平滑移动动画的 div，就像在 MSWindows 的 Office 中一样

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
    <script>
        function getCaretCoordinates() {
            let x = 0,
            y = 0;
            const isSupported = typeof window.getSelection !== "undefined";
            if (isSupported) {
                const selection = window.getSelection();
                if (selection.rangeCount !== 0) {
                    const range = selection.getRangeAt(0).cloneRange();
                    range.collapse(true);
                    const rect = range.getClientRects()[0];
                    if (rect) {
        x = rect.left; 
        y = rect.top;
    }
}
}
return { x, y };
}

function getCaretIndex(element) {
    let position = 0;
    const isSupported = typeof window.getSelection !== "undefined";
    if (isSupported) {
        const selection = window.getSelection();
        if (selection.rangeCount !== 0) {
            const range = window.getSelection().getRangeAt(0);
            const preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            position = preCaretRange.toString().length;
        }

    }
    return position;
}




$(document).ready(function(){
    $("#cc").hide();

    $(".texto").on("click keydown keypress keyup", function(e) {
        $("#cc").hide();
        var posX = getCaretCoordinates().x;
        var posY = getCaretCoordinates().y;
        var arregloX = posX + 1;
        if (posX > 1 || posY > 1) {
            $("#cc").show().css({
                top: posY + "px",
                left: arregloX + "px",
            });
        } else {
            $("#cc").hide();
        }
        
    }).on("blur", function(e) {
        $("#cc").hide();
    });

});
</script>



<div class="texto" contenteditable="true" style="font-size: 16px; caret-color: transparent; border: 1px #323232 solid; border-radius: 8px; padding: 20px; line-height: 1.2;">
    
    Hello World! Press here and test to Write!

</div>

<div class="texto" contenteditable="true" style="margin-top: 20px;font-size: 16px; caret-color: transparent; border: 1px #323232 solid; border-radius: 8px; padding: 20px; line-height: 1.2;">
    
    Hello World! Press here and test to Write!

</div>
<div id="cc"></div>
<style>
    #cc {
        width: 2px; height: 16px; background: #282828; position: absolute; top: 0; left: 0; transition: 100ms;
         transition-timing-function: ease-out;
          display: inline; border-radius: 8px;
         animation-duration: 500ms;
  animation-name: parpadear;
  animation-iteration-count: infinite;
  animation-direction: alternate;

    }
@keyframes parpadear {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
</style>

</body>
</html>

You can "style" the caret input with some hack tweaks... in this example the caret is "replaced" with a div animated with smooth movement, like in Office for MSWindows

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
    <script>
        function getCaretCoordinates() {
            let x = 0,
            y = 0;
            const isSupported = typeof window.getSelection !== "undefined";
            if (isSupported) {
                const selection = window.getSelection();
                if (selection.rangeCount !== 0) {
                    const range = selection.getRangeAt(0).cloneRange();
                    range.collapse(true);
                    const rect = range.getClientRects()[0];
                    if (rect) {
        x = rect.left; 
        y = rect.top;
    }
}
}
return { x, y };
}

function getCaretIndex(element) {
    let position = 0;
    const isSupported = typeof window.getSelection !== "undefined";
    if (isSupported) {
        const selection = window.getSelection();
        if (selection.rangeCount !== 0) {
            const range = window.getSelection().getRangeAt(0);
            const preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            position = preCaretRange.toString().length;
        }

    }
    return position;
}




$(document).ready(function(){
    $("#cc").hide();

    $(".texto").on("click keydown keypress keyup", function(e) {
        $("#cc").hide();
        var posX = getCaretCoordinates().x;
        var posY = getCaretCoordinates().y;
        var arregloX = posX + 1;
        if (posX > 1 || posY > 1) {
            $("#cc").show().css({
                top: posY + "px",
                left: arregloX + "px",
            });
        } else {
            $("#cc").hide();
        }
        
    }).on("blur", function(e) {
        $("#cc").hide();
    });

});
</script>



<div class="texto" contenteditable="true" style="font-size: 16px; caret-color: transparent; border: 1px #323232 solid; border-radius: 8px; padding: 20px; line-height: 1.2;">
    
    Hello World! Press here and test to Write!

</div>

<div class="texto" contenteditable="true" style="margin-top: 20px;font-size: 16px; caret-color: transparent; border: 1px #323232 solid; border-radius: 8px; padding: 20px; line-height: 1.2;">
    
    Hello World! Press here and test to Write!

</div>
<div id="cc"></div>
<style>
    #cc {
        width: 2px; height: 16px; background: #282828; position: absolute; top: 0; left: 0; transition: 100ms;
         transition-timing-function: ease-out;
          display: inline; border-radius: 8px;
         animation-duration: 500ms;
  animation-name: parpadear;
  animation-iteration-count: infinite;
  animation-direction: alternate;

    }
@keyframes parpadear {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
</style>

</body>
</html>
回复 原文
孤寂小茶 2024-12-10 08:07:49

当我尝试构建一个类似终端的网站时，我发现目前还没有办法使用 CSS 来更改光标的样式。

但是您可以更改插入符号颜色，如其他答案中所示。

然后，经过近 3 天的研究，我通过检查网站得到了一个想法（抱歉，我无法提供链接），

它在 command string 中添加和删除 HTML span 元素并创建一个块光标，但如果您使用一点 CSS 知道插入符号的位置，则可以制作任何插入符号。

我不建议在生产应用程序中使用此方法。

这帮助我创建了一个插入符号，就像您在在我的网站中看到的那样，

您可以在以下位置查看源代码<一href="https://github.com/mind0bender/phew/blob/657618a742d08c076587fa0870f867ed2f1dfaea/pages/index.tsx" rel="nofollow noreferrer">此仓库

摘要：

假设您的文本是 echo Hello 后带有插入符H。
那么代码可能类似于

<div>
  <span>
    echo H
  </span>
  <span class="animate-blink" >  <!-- This span will act as your caret -->
    e
  </span>
  <span>
    llo
  </span>
</div>

希望它有帮助;-)

While I was trying to build a terminal like website i got to know that there is no way (yet) to change the style of the cursor using CSS.

But you can change the caret-color as shown in the other answer.

Then, after almost 3 days of research I got an Idea from inspecting a website (sorry, I can't provide the link)

It adds and removes a HTML span element in the command string and makes a block cursor but you can make any caret if you know the caret's position with a little bit of CSS.

I don't recommend this for a production application.

This helped me create a caret like you see in my site

You can see the source in this repo

Summary:

suppose your text is echo Hello with caret after H.
Then the code might be something like

<div>
  <span>
    echo H
  </span>
  <span class="animate-blink" >  <!-- This span will act as your caret -->
    e
  </span>
  <span>
    llo
  </span>
</div>

Hope it helps ;-)

回复 原文
半枫 2024-12-10 08:07:49

这很简单。
只需添加插入符号颜色属性，如下所示：

* {cursor: url(http://labs.semplice.com/wp-content/uploads/2020/02/custom-cursor-arrow.png) 20 20, auto;}
input, div {padding: 20px;}
<input style="caret-color: rgb(0, 200, 0);">

<br>
<textarea style="caret-color: blue;"></textarea>

<br>
<div contenteditable style="padding: 5px; border: 1px solid black;border-color: black;caret-color: red"></div>

it is simple.
Just add the caret-color attribute like this:

* {cursor: url(http://labs.semplice.com/wp-content/uploads/2020/02/custom-cursor-arrow.png) 20 20, auto;}
input, div {padding: 20px;}
<input style="caret-color: rgb(0, 200, 0);">

<br>
<textarea style="caret-color: blue;"></textarea>

<br>
<div contenteditable style="padding: 5px; border: 1px solid black;border-color: black;caret-color: red"></div>

回复 原文
~没有更多了~

关于作者

羁客

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文