::selection tint的控制高度/行高

Question

网页设计师的审美问题：

我正在构建一个设计系统。我想同时控制color 和height 和/或line-height 的::selection。

我已经测试了明显的：

::-moz-selection {
  height: 24px;
  line-height: 24px;
  background: rgba(0, 0, 0, 0.10);
}
::selection {
  height: 24px;
  line-height: 24px;
  background: rgba(0, 0, 0, 0.10);
}
p {
  line-height: 100px;
}

height 或 line-height 声明都不会呈现所需的结果：

• Safari 版本 11.1 (13605.1.33.1.2) 似乎在您突出显示文本时 单击并拖动 y 高度为 118px 的色调。我只能假设松散地遵守p 标签的line-height 声明。
• Chrome 版本 65.0.3325.181 以16px y 高度的色调突出显示文本，并且似乎忽略了我的所有声明。

有没有办法用 css 精确控制::selection tint 的高度？

Answer 1

来自MDN：

只有一小部分 CSS 属性可以用于选择器中带有 ::selection 的规则：

• color
• background-color
• cursor
• caret-color
• outline 及其长手
• text-decoration 及其相关属性
• text-emphasis-color
• text-shadow

因此，如您所见，::selection 不支持height 或line-height。

另外，其中一些属性won't work。

---

对于纯 CSS 解决方案，我只能考虑使用 :focus，但您必须使用 tabIndex 使元素“可聚焦”：

p::selection {
  background: red;
}

p:focus {
  height: 100px;
}

<p tabIndex="1">foo</p>
<p>bar</p>