代码之家 › 专栏 › 技术社区 › user81993

展开选定文本的背景色矩形

css3 css

3

user81993 · 技术社区 · 7 年前

根据MDN,outline应该在 ::selection 伪元素,但当在chrome和ff上测试时似乎不是。

::selection {
  background-color:red;
  outline:2px dashed blue;
}

My cool text, select me!

我正在创建一个文本编辑器,基本上它只是让我恼火的选择背景颜色是多么紧密。我想把它扩展几个像素,大纲将是正确的工作属性,但它不起作用?

0 回复 | 直到 7 年前

1

Temani Afif 7 年前

我认为MDN是错误的或者没有更新,因为如果我们提到 the specification :

highlight伪元素只能由一组不影响布局的有限属性设置样式。以下属性适用于突出显示伪元素:

颜色

光标

文本装饰及其相关属性

笔划颜色、填充颜色和笔划宽度

这个 outline

对于文本,相应的覆盖必须覆盖 至少整个电磁盒 并可延伸至电磁盒上方/下方 . 两个字符之间的间距也可能是覆盖区域的一部分,在这种情况下,它属于包含两个字符的最里面的元素,并且在选中两个字符时被选中。

我们已经有了电磁盒,这是微不足道的,你最好的运气是有更多的,以防线框更高,但它 不会的 表现出相同的跨浏览器行为。

下面的示例适用于Chrome,而不适用于fiferbox

p:after {
  content: "";
  font-size: 30px;
  vertical-align: middle;
}

p::selection {
  background-color: red;
}

<p>My cool text, select me!</p>

text-shadow 我们可以将阴影放置在远离文本的位置,但使用选定内容时,阴影将无法溢出高亮度区域:

p {
  text-shadow:0 10px 0 red;
}

p::selection {
  background-color: red;
  text-shadow:0 -10px 0 blue;
}

<p>我的酷文本,选择我!<p>

overflow:hidden 去红色区域。所以即使你能用轮廓来设计选择的样式,基本上也不可能控制它的尺寸,这正是你需要的。

我认为您最好的选择是依赖JS来创建动态元素,或者包装选定的文本来轻松地设置它们的样式。使用CSS,您只能应用一些会影响布局的黑客。

2

0

doğukan 7 年前

在第一行之外,另一行有效 line-height . 如你所见:

div {
  line-height:30px;
}

div::selection {
  background: yellow;
}

<div>text<br />text<br />text</div>

所以,我做了一个Javascript技巧,为我们添加了第一行。我也在付出 font-size: 0px

let a = document.querySelectorAll(".a");

a.forEach(function(par){
  par.insertAdjacentHTML('afterbegin','needed text<br />')
})

// for an unseen first line.

.a {
  line-height:50px;    
}

.a::selection {
  background: yellow;
}

.a::first-line {
  font-size:0px;
  line-height:0px;
}

<div class="a">text</div>