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

Question

网页设计师的美学问题：

我正在建立一个设计系统。我想控制color的{​​{1}}和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声明均未呈现所需结果：

• Safari版本11.1（13605.1.33.1.2）似乎突出显示文字 单击并拖动y高度为line-height的色调。我只能假设它松散地遵守118px标记p声明。
• Chrome版本65.0.3325.181突出显示带有line-height y高度的色调的文字，似乎忽略了我的所有声明。

有没有办法用css准确控制16px色调的高度？

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，但您必须使用{{使“可聚焦”元素1}}：

tabIndex

p::selection {
  background: red;
}

p:focus {
  height: 100px;
}