javascript - css文本::圆 Angular 选择

Question

我在 VSCode 和 monaco-editor 中看到了这个选择，它看起来非常好:



所以我试图重新创建这个，这是我的努力:

#ta{
  font-size : 18px;
}
#ta::selection{
  background : rgba(173, 216, 130, 0.9);
  border : 1px solid transparent;
  border-radius : 15px;
}

<textarea id="ta"></textarea>

但这并没有像图片中显示的那样得到圆 Angular 效果(我希望你能得到它)。

请帮帮我。答案表示赞赏。

Answer 1

正如一些人已经评论过你的问题

::selection is only a very small subset of CSS rules that can be applied to it, border-radius not being one of them...

所以，下一步是，如果你真的需要它，你怎么能绕过它？选项之一是:
您可以使用“选定”字符串，然后添加一些 HTML 标记。然后，当您选择文本并释放鼠标时，您的所有 CSS 样式都将被应用。

请记住:这可能不适用于“普通”文本框

我希望下面的代码给你一个开始的例子

var selectionElements = document.querySelectorAll('.selection');
selectionElements.forEach(function(element){
    element.setAttribute('original-content', element.innerHTML);  // this will be needed to reset to original after a selection has been made
    element.addEventListener('mouseup', function() {
        replaceContentWithSelectionWrapper(this)
    });
});

function replaceContentWithSelectionWrapper(element) {
    let selection = window.getSelection().toString();
    if(selection.length <= 0) { // if selection length is not bigger then 0 we can stop right here
        return;
    }
    // next lines should be self explanatory
    // get start of string until selection
    // get the end of string after selection
    // concatenate all strings back together
    let selObj = window.getSelection(); 
    let selRange = selObj.getRangeAt(0);
    let originalString = element.innerHTML;
    let start = originalString.substr(0, selRange.startOffset);
    let end = originalString.substr(selRange.endOffset);
    element.innerHTML = start + '<span class="mark-special-selected">' + selection + '</span>' + end;
    document.body.classList.add('selections-enabled');
}

function clearSelections() {
    var selections = document.querySelectorAll('[original-content]');
    selections.forEach(function(selection){
        selection.innerHTML = selection.getAttribute('original-content');
    });
}

document.body.addEventListener('mousedown', function(){
    if(document.body.classList.contains('selections-enabled')) {
        document.body.classList.remove('selections-enabled');
        clearSelections();
    }
});

.selection {
  font-size : 18px;
}
.mark-special-selected,
.selection::selection{
  background : rgba(173, 216, 130, 0.9);
  border : 1px solid transparent;
  border-radius : 15px;
  outline: 2px;
}

<h1 class="selection">Here is some text, you can select some of it with your mouse</h1>
<p class="selection">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>