如何在HTML/CSS中修改文本光标颜色 解决深色背景下光标不可见问题

解决方法 #

CSS提供了专门控制文本插入光标颜色的属性caret-color，直接添加到你的.PreCode样式规则中即可。比如你需要红色光标，修改后的样式如下：

<style>
    .PreCode {
         font-family: Georgia, 'Times New Roman', Times, serif;
         font-size: initial;
         color: rgb(28,26,26);
         background-color: grey;
         border: 1px solid black;
         text-transform: capitalize;
         font-weight: 100;
         margin-top: 20px;
         text-align: center;
         padding: 10px;
         /* 自定义文本光标颜色 */
         caret-color: red;
         }
</style>

补充说明 #

• caret-color支持所有CSS合法颜色格式，你可以根据背景对比度自由调整，比如用caret-color: #fff;设置白色光标也可以。
• 该属性所有现代浏览器都原生支持，不需要加任何私有前缀。
• 如果你的div还没有开启编辑功能，需要给标签加上contenteditable="true"属性才能正常触发输入光标，示例如下：

<div class="PreCode" contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla necessitatibus dolorem suscipit. Quibusdam dolorem eos sunt voluptate neque, unde expedita, error modi, assumenda quisquam repudiandae iste provident rerum vel blanditiis.
</div>

• 如果你需要兼容非常老旧的浏览器版本，也可以直接调整.PreCode的color属性，光标默认会继承文本颜色，不过该方案会同时修改文本显示颜色，可根据需求选择。

内容的提问来源于stack exchange，提问作者Amaan