mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 02:05:07 +02:00
Previously, text selection always used the system highlight color. This implements support for the ::selection pseudo-element's background-color and color properties. For form controls like <input> and <textarea>, the selection style is looked up on the shadow host element, since the actual text lives inside their shadow DOM. The text painting logic has been refactored to split fragments into styled spans (before selection, selected, after selection) so that each portion can be rendered with its appropriate colors, taking care not to allocate in 99%+ of fragment rendering cases.
19 lines
283 B
HTML
19 lines
283 B
HTML
<!DOCTYPE html>
|
|
<style>
|
|
input {
|
|
font-size: 20px;
|
|
width: 200px;
|
|
outline: none;
|
|
}
|
|
|
|
input::selection {
|
|
background-color: red;
|
|
}
|
|
</style>
|
|
|
|
<input value="Selected text">
|
|
<script>
|
|
document.querySelector("input").focus();
|
|
document.querySelector("input").select();
|
|
</script>
|