Расширение фона цвета прямоугольника выделенного текста

Question

Согласно MDN, контур должен работать на псевдоэлементе ::selection, но при тестировании как на хроме, так и на ff не работает.

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

My cool text, select me!

Я создаю текстовый редактор, и в основном меня раздражает, насколько плотно подгоняется цвет фона выделения.Я хочу расширить его на несколько пикселей, и контур будет правильным атрибутом для работы, но он не работает?

Answer 1

Я думаю, что MDN неверен или не обновлен, потому что если мы ссылаемся на спецификацию :

Выделенные псевдоэлементы могут быть стилизованы только ограниченным наборомсвойства, которые не влияют на макет.Следующие свойства применяются к выделенным псевдоэлементам:

• color
• background-color
• курсор
• caret-color
• текстовое оформление и связанные с ним свойства
• текстовая тень
• цвет обводки, цвет заливки и ширина обводки

outline нет в списке, что объясняет, почему это не работает.Также я не думаю, что вы можете контролировать область подсветки.Как объясняется в той же спецификации:

Для текста соответствующее наложение должно охватывать как минимум всю область em и может простираться выше / ниже поля em докрая строки .Интервал между двумя символами также может быть частью области наложения, в этом случае он принадлежит к самому внутреннему элементу, который содержит оба символа и выбирается при выборе обоих символов.

У нас уже есть поле emчто тривиально, и вам больше всего повезло, если у вас будет больше строки, если поле строки выше, но оно не будет вести себя так же, как кросс-браузер.

Вот базовый пример, где я использую псевдоэлемент с большим размером шрифта, чтобы увеличить высоту линейного блока, и я выровняю его по центру.В этом случае выбор будет охватывать не только текст, но, конечно, это также повлияет на макет, который, вероятно, не нужен и не будет работать со всеми браузерами.

Приведенный ниже пример работает с Chrome ине на Fiferfox

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>My cool text, select me!</p>

Обратите внимание, что синяя тень текста частично видна, как мы применили overflow:hidden к красной области.Таким образом, даже если вы можете стилизовать выделение с помощью контура, в принципе невозможно контролировать его размерность, что вам и нужно.

---

Я думаю, что ваш лучший вариант - полагаться на JS для создания динамического элемента илиоберните выделенный текст, чтобы легко оформить их.С помощью CSS вы можете применить только некоторые хаки, которые повлияют на ваш макет.

Answer 2

За пределами первой строки, другая строка действительна с 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>