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 is only a very small subset of CSS rules that can be applied to it, border-radius not being one of them...

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

请记住：这可能不适用于 "normal" 个文本框

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

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的文本选择是这样的：

以下代码片段的其他问题：

如果在文本框外释放点击，圆角效果可能不起作用；
如果文本是从文本框外选择的，则选择是默认的；
本例中，如果光标选中header文字，在下面的文字上松开，则上面选中的文字写得较低，只对下面的段落有效果；
本例中，如果光标选中下方文字，松开上方文字，则下方选中的文字写在上方，效果只作用于选中的复制部分，即header文字；
如果文本选择得太快（我认为这是它的原因），圆角在 header 文本上不起作用。

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

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>

css 文本 ::选择带圆角

css text ::selection with round corners

html

javascript

css

selection