CSS中的选择（ ::selection和user-select）

 

CSS中的选择（ ::selection和user-select）

在网络上，我们出于不同原因选择内容，也许我们想复制文本并在某处引用它。对于移动端来说，选择内容比较难，我不喜欢在移动端选择内容。

在本文中，我将详细介绍CSS中有关选择的所有内容，包括伪类 ::selection 和 user-select。本文的目标是让你了解所有这些技术，并让你知道何时何地使用它们。

根据Mozilla开发人员网络（MDN）：

::selection CSS伪元素将样式应用于用户已突出显示的文档部分（例如，在文本上单击并拖动鼠标）。

要使用 ::selection 伪类，只需执行以下操作：

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

::selection支持的属性

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

自定义选择

如果我们想要自定义选择效果怎么办？例如，控制选择的高度并具有自定义背景？见下图：

这是可能的，但有点棘手。下面是如何做到这一点的解释：

1. 我们添加具有相同文本内容的伪元素。然后，我们给它一个50％的高度，并带有白色背景色。
2. 伪元素位于原始文本上方。

现在，选择文本后，伪元素将垂直覆盖文本的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％，并且不重复背景。

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;
}

请参见下图，以获得直观的说明。

希望现在更加清楚！请参阅CodePen上的demo。

Demo：https://codepen.io/shadeed/pen/5074964e902cd83d96e5ce7ba9ee1423?editors=1100

动画选择

在进行上一个演示时，我问自己一个问题：是否可以对选择进行动画处理？例如，当选择文本并且鼠标没有悬停时，高度为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);
}

此解决方案有效，但不适用于所有文本。例如，下面的文本包含一个逗号，数字，大写字母。请注意，选择在所有单词中都不一致。

我想说的是，采用多行选择风格是很棘手的，因此不应在网站上全局使用。如果仅将其用于一个段落，也许完全没问题。

Demo：https://codepen.io/shadeed/pen/c6d187eadc8251fcce7a8f85506a9ee3?editors=1100

通过 ::selection 和 text-shadow 获得创意

由于 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;
}

轮廓文字选择

根据本文有关CSS技巧的文章，我们可以使用 text-shadow 模拟文本轮廓。

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

模糊选择

另一个有趣的效果是使所选文字模糊。通过使颜色 transparent，文本阴影将仍然存在并且模仿模糊效果。

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

而且，我敢肯定，你可以拿出越来越多的例子。

文本阴影和性能

建议不要使用沉重的文本阴影样式，因为它们会导致性能问题。如下示例

霓虹灯效果非常沉重。请注意，在选择文本时，在我选择的时间和所选样式出现的时间之间存在一个延迟。另外，请注意顶部和左侧的故障。请小心使用 text-shadow。

 

转发

@杭州程序员小张：

CSS中的选择（ ::selection和user-select）

0/2000字

转发