css文本::圆角选择

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>

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

请帮帮我。感谢您的回答。

Answer 1

正如一些人已经对你的问题发表了评论

::selection 只是可以应用到它的 CSS 规则的一个很小的子集，border-radius 不是其中之一......

那么，下一步是，如果你真的需要它，你怎么能绕过它？选项之一是： 您可以使用“选定”字符串，然后添加一些 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>

Answer 2

有了这个 CSS，效果更像 VS Code 的文本选择，只是没有立即圆整，而且对每个交点没有效果（并且行之间有一行 1 个像素的空白，由于没有边框），但选择它时文本不会移动。

提醒一下Visual Studio Code的文字选择是这样的：

下面代码sn-p的其他问题：

• 如果在文本框外释放点击，圆角效果可能不起作用；
• 如果文本是从文本框外选择的，则默认选择；
• 本例中，如果光标选中页眉文本，松开对下方文本的点击，则上方选中的文本写在下方，效果只在下方段落；
• 在本例中，如果光标选择下部文本并释放对上部文本的单击，则下部选定文本写在上方，并且效果仅对现在位于标题文本中的选定复制部分起作用；
• 如果文本选择得太快（我认为这是原因），圆角对标题文本不起作用。

无论如何，这个文本选择发生了奇怪的事情，如果有人能处理它们，那就太好了。

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: #8884;
  border-radius: 4px;
}

<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>