如何实现文本框内的文本突出显示

当我们需要在网页上展示一段文字，往往需要将某些关键词或短语进行特殊标注，以便吸引用户的注意力。本文将介绍如何使用 CSS 实现文本框内的文本突出显示。

使用 ::selection 伪元素

::selection 是一个用来选择文本框内已选中文本的伪元素，我们可以通过修改它的样式来实现文本的突出显示。具体步骤如下：

1. 在 CSS 中定义 ::selection 伪元素的样式。

::selection {
    background-color: yellow;
    color: black;
}

1. 将样式应用到指定的文本框元素上。

<input type="text" value="这是一段需要突出的文本">

input::selection {
    background-color: yellow;
    color: black;
}

1. 运行页面，选中文本框内需要突出的文本即可看到效果。

兼容性问题

需要注意的是，::selection 伪元素在不同浏览器之间的兼容性存在差异。例如，在 Firefox 和 Safari 中，只有部分属性（如 color、background-color 等）能够被修改，而在 Chrome 和 Edge 中则可以修改更多的属性。

因此，在实际开发中，为了保证页面的兼容性，建议同时使用两种方法来实现文本的突出显示。

使用 mark 标签

mark 标签是 HTML5 中新增的标签，用于表示需要高亮显示的文本。通过在该标签中包裹需要突出显示的文本，即可实现文本的高亮显示效果。

<input type="text" value="这是一段需要突出的文本">

mark {
    background-color: yellow;
    color: black;
}

<input type="text" value="这是一段<mark>需要突出</mark>的文本">

结语

本文介绍了两种实现文本框内文本突出显示的方法，其中 ::selection 伪元素方式的兼容性相对较差，因此建议在实际开发中使用 mark 标签的方式。当然，在某些情况下，也可以通过 JavaScript 来实现更加复杂和丰富的文本突出显示效果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24300