如何使用选择范围更改文本区域中选定文本的突出显示颜色？

Question

我目前正在使用 Web API 中的选择范围突出显示文本区域中的文本。这很好用，但是，我想更改默认的突出显示颜色和不透明度。我试图用 css 来改变它（见下面的例子），但是，它不会更新选择的颜色。有谁知道实现这个的方法吗？

// select text
const startPosition = 0;
const endPosition = 25;
textarea.setSelectionRange(startPosition, endPosition);

// CSS
textarea::selection {
    background-color: red;
}

Answer 1

我不太明白你想要什么。
您想要像下面的代码这样的答案吗？
https://codepen.io/jyh7a/pen/xxpLMZZ

HTML

<input type="text" id="text-box" size="20" value="Mozilla">
<button onclick="selectText()">Select text</button>

<hr/>

<textarea rows="6" cols="40">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro maxime excepturi autem nostrum minus quae magni, esse optio ab, dolor ut iste earum sapiente molestiae nihil totam rem ipsam officia?</textarea>

<hr/>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro maxime excepturi autem nostrum minus quae magni, esse optio ab, dolor ut iste earum sapiente molestiae nihil totam rem ipsam officia?</p>

CSS

::selection {
    background-color: rgba(255,0,0,0.2);
}

JS

function selectText() {
  
  const input = document.getElementById('text-box');  
  input.focus();
  input.setSelectionRange(2, 5);

  setTimeout(() => {
    const textarea = document.querySelector('textarea');
    textarea.focus();
    textarea.setSelectionRange(0, 20);
  }, 1000)
  
     
  // // ERROR! 
  // // setSelectionRange function only use HTMLInputElements
  // const p = document.querySelector('p');
  // p.setSelectionRange(0, 20);
}

我搜索了 setSelectionRange
上面的例子是我看MDN官方文档做的
(Link: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange )

希望以上代码对您有所帮助。

如何使用选择范围更改文本区域中选定文本的突出显示颜色？

How to change the highlight color of selected text in a textarea, using selection range?

javascript

selection

webapi