🈴 🌗 🧓🏾 选择和CSS 🔠 🎌 😡

突出显示文本和其他对象的技能是许多年前在计算机用户中形成的。我们出于各种原因突出显示网页的内容。也许您需要复制文本并在某处引用它-某人阅读文本并突出显示其片段会更简单。但是，在移动设备上，突出显示一些困难的事情。例如，这让我很烦。我不喜欢在手机上突出显示网页内容。此操作似乎在某种程度上是“错误的”。在本文中，我将讨论有关CSS样式选择所需的所有知识。特别是，我们将讨论伪元素和属性

::selectionuser-select。本文旨在向所有人展示希望CSS与选择一起使用的人，以及如何使用不同的方法来处理选择。

基础

在MDN上，您可以了解到伪元素::selection允许您将样式应用于用户已选择的文档部分（例如，使用鼠标）。

要使用它::selection，只需使用以下结构即可：

p::selection {
   color: #fff;
   background-color: #000; 
}

选定的文本，

这是您可以尝试的示例。

支持的属性::选择

值得注意的是，伪元素::selection仅支持属性color，background和text-shadow。

自定义您自己的选择效果

如果我们需要使选择看起来特别怎么办？例如，这样选区将具有一定的高度或一些有趣的背景？看下图。

特殊选择项的示例

这是可能的，尽管需要一些努力。上面显示的选择方法如下：

添加了伪元素，并带有我们选择的相同文本。然后，将伪元素设置为属性height: 50%和白色背景色。
伪元素位于源文本上方。

如果现在选择文本，则伪元素将垂直重叠文本的50％。这使我们可以模拟所需的效果。

p {
  position: relative;
  color: #fff;
}

p:after {
  content: attr(data-content);
  position: absolute;
  color: #000;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #fff;
}

p::selection {
  background: rgba(76, 125, 225, 0.18);
}

我在这里了解了这种技术。

下面提供了此选择的另一个选项。在这里，我将选择内容实现为CSS渐变，而不是使用实体选择。这里的重点是使用高度为50％的白色渐变，并通过no-repeat设置属性时使用值将背景图像填充一次元素background。

h1:after {
  content: attr(data-content);
  position: absolute;
  color: #000;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(#fff, #fff) top/100% 50% no-repeat;
}

下图说明了此技术。

实施渐变突出显示

希望我能够清楚地解释这个想法。这是一个工作示例。

动画选择

在前面的示例中，我问了以下问题：“对选择进行动画处理是否现实？”。例如，在选择文本的过程中，选择的高度为50％。当鼠标指针移到侧面时，选择的高度将增加到80％。怎么做？但是像这样：

p {
    transition: background 0.3s ease-out;
}

p:hover:after {
  background-size: 100% 80%;
}

选择过程中的文字

完成选择后的文本

这是演示动画选择的视频。

多行文字

不幸的是，上述选择调整技术不适用于多行文本。但是，为了对此类文本实施类似的操作，您需要诉诸JavaScript的功能，并将每个单词放入嵌入式（小写）元素中，例如<span>。在每个单词出现在其自己的元素中之后<span>，必须将伪元素添加到每个元素中。之后，上述效果可以应用于多行文本。

这是一个将每个单词放入<span>容器的脚本：

let paragraph = document.querySelector(".text");
const words = paragraph.textContent.split(" ");

paragraph.innerHTML = "";

words.forEach(function (word) {
  let wordItem = document.createElement("span");
  wordItem.setAttribute("data-word", word);
  wordItem.innerHTML = word + " ";
  paragraph.appendChild(wordItem);
});

之后，<span>必须对元素进行样式化。然后，您需要为每个元素添加一个伪元素：

span {
    position: relative;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  span::after {
    content: attr(data-word);
    position: absolute;
    left: 0;
    right: 0;
    top: -0.28em;
    height: 75%;
    padding-top: 0.14em;
    background: #fff;
    pointer-events: none;
  }

  span::selection {
    background: rgba(#4C7DE1, 0.18);
  }

如果您在实践中看一下这种设计，事实证明它是可行的，但并不像您期望的那样。多行文字突出显示的示例如下所示。您可能会注意到选择看起来不完整。

不均匀的选择

我会说这样的多行选择不是很好，因此不应在全球范围内使用。例如，也许应该仅将其用于组织特定段落的选择。

在这里，通过这样的选择，您可以进行实验。

创意用途::选择和文字阴影

由于伪元素支持的属性之一::selection是text-shadow我们可以尝试使用文本的多个阴影来实现一些有趣的效果。我们正在探索这个想法摆在我们面前的可能性。

▍加长阴影

选定的文字会产生阴影。

以下是实现此效果的方法：

p::selection {
    color: #444444;
    background: #ffffff;
    text-shadow: 1px 0px 1px #cccccc, 0px 1px 1px #eeeeee, 2px 1px 1px #cccccc, 1px 2px 1px #eeeeee, 3px 2px 1px #cccccc, 2px 3px 1px #eeeeee, 4px 3px 1px #cccccc, 3px 4px 1px #eeeeee, 5px 4px 1px #cccccc, 4px 5px 1px #eeeeee, 6px 5px 1px #cccccc, 5px 6px 1px #eeeeee, 7px 6px 1px #cccccc;
}

▍轮廓文字效果

选定的文本变成轮廓线

我在本文中找到了这个想法。我们正在谈论一个事实，即使用该属性text-shadow可以模拟轮廓文本的效果。

p::selection {
    color: #fff;
    text-shadow: 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

effect模糊效果

选定的文本看起来很模糊

，可以应用于选定文本的另一个有趣的效果是使文本模糊。底线是在设置文本颜色时使用该属性color: transparent。在帮助下设置的阴影text-shadow不会在任何地方消失，这将提供所需的效果。

p::selection {
  color: transparent;
  text-shadow: 0 0 3px #fff;
}

我相信您自己可以提出更多text-shadow样式选择示例。此属性为我们提供了无限的可能性。

▍阴影文字和表演

自定义时，建议不要使用过于复杂的样式text-shadow。事实是，对此属性的过度热情会导致性能问题。这是一个显示此类问题示例的视频。

使用非常复杂的样式自定义文本选择

这里介绍的霓虹灯效果非常复杂。请注意，选择该文本后，在选择文本和应用样式之间会有明显的延迟。另外，要注意不要在顶部和左侧出现的内容。因此，请您text-shadow谨慎使用。

表单元素是否突出？

在本节标题中，对该问题的简短回答听起来是“是”。在我看来，这是错误的：您选择了页面，但事实证明，输入字段中的内容也被突出显示了。这是它的外观。

输入字段内的内容将突出显示

，在此还可以选择按钮内的文本。在专用于的部分中user-select，我们将讨论是否允许用户突出显示元素的形式。

这是一个例子。

调查用户选择属性

该属性user-select允许我们设置用户选择特定文本的能力。此属性对于禁用选择文本的功能可能有用，这可能对限制用户选择彼此相邻的材质的功能很有用。这是描述的标准user-select。

此属性可以采用以下值：none, auto, text, contain, all。

用户选择用例

▍文字和图标

如果元素具有文本和图标（采用从某种字体中提取的符号或图标的形式），则在选择文本时该图标将突出显示。考虑下图所示的示例。

带有文本和图标的按钮

这是此按钮的代码：

<button>Our Services<span aria-hidden="true">▼</span></button>

当您选择此项时，它看起来如下图所示。

专用按钮

完全没有必要。请注意，标记使用的属性aria-hidden会向屏幕阅读器隐藏图标。为了解决突出显示不需要突出显示的问题，我们可以使用以下样式：

button span[aria-hidden="true"] {
    user-select: none;
}

这使您可以禁止选择图标。并且，同时，我们将选择禁令绑定到attribute aria-hidden。结果，屏幕阅读器不应该看到不应该突出的所有内容。

▍标志

当我通过设置或取消选中某个标志而意外地选择了其描述文本时，标志的这种行为使我感到烦恼。这是它的外观。

标志描述的文本是随机选择的，可以

通过<label>如下方式设置元素的样式来解决此问题：

label {
    user-select: none;
}

▍高亮显示所有文字

all属性可以采用的值可以user-select使您获得有趣的效果。如果父元素的属性具有这样的值，则可以一键选择包含在该元素中的所有文本。这对于处理文本内容可能很有用，应将其全文突出显示。例如，突出显示页面上可用的代码片段：

.embed-code {
    user-select: all;
}

只需单击一下即可选择以这种样式设计的文本片段。

网络应用

用户应将Web应用程序视为真实应用程序。在常规应用程序中可以选择按钮文本吗？你不能。即使Web应用程序是使用HTML和CSS设计的，它们也必须反映常规应用程序的熟悉功能，这一点很重要。

考虑生活中的一些例子。

lack松弛

在Slack中，您可以突出显示标签和输入字段。但是，按钮文本不会突出显示。

按钮标题未突出显示，

这是另一个示例。

模态窗口标题栏中的签名突出显示

，无法选择聊天日期。

无法分配日期

通常，对我来说，这很奇怪，您可以在应用程序中选择一些文本，这些文本似乎不支持选择。Slack界面中user-select: none有一些使用它的地方，但是这样的地方比您预期的要少。例如，对我来说，作为用户，突出显示模式窗口的标题没有任何好处。

▍提名

我更喜欢在概念中实现的元素选择方法。该Web应用程序更像一个真实的应用程序，而不是一个网站，该网站的任何部分都可以突出显示。

不应该

突出的内容并不突出，这张图片中没有突出显示一段文字。这正是您可以从应用程序中获得的期望。

不使用全局选择禁用

不建议全局禁用选择。使用禁用选择时，请尝试仅对没有意义的元素禁用它。为此，您可以创建一个助手类。例如-这：

.disable-selection {
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

不良模式

我真的不喜欢一种UX模式。它包括在尝试突出显示文本时显示警告。这使用户感到烦恼，并使他们感到好像他们试图控制他与站点的交互。下面显示了此模式的示例。

禁用带有通知显示的突出显示

请不要这样做。

在移动设备上突出显示

-webkit-touch-calloutiOS Safari 有一个属性，当选择文本时，该属性应关闭显示的标准工具提示的显示。我试图使用此属性，但是它不起作用。

p {
    -webkit-touch-callout: none;
}

样式::selection也不起作用。

和财产user-select: none按预期工作。

我试图找到一个说明这个问题的真实例子。我复制了维基百科的一段文字。同时，复制了我完全不需要的文本(listen)。真烦人

它与有用的文本一起被复制和（监听），

而不是允许用户复制此“监听”，最好向该元素添加样式user-select: none。结果，在复制包含此元素的文本时，将不会复制它。

摘要

在这里，我们研究了使用CSS自定义网页元素突出显示的方法。您可能对查看此材料感兴趣。

亲爱的读者们！如何在项目中设置文本选择？

选择和CSS

基础