html – 如何应用圆角边框突出显示/选择

我已经使用了 Visual Studio Online一段时间的项目，他们在他们的在线代码查看器中选择圆形边框的方式非常有趣：

我已经尝试检查元素并寻找某种自定义CSS，但没有运气。

我有一种感觉，这需要一些复杂的“黑客”使其工作，但似乎非常有趣，因为我从来没有看过它。

他们如何能够将圆形边框应用于选择？

注意：正常选择完全隐藏在WHILE选择中，舍入选择就像常规选择一样跟随您的光标。没有选择任何东西后。

编辑：我有created a fork的@ Coma的答案应该在Firefox中工作，并选择鼠标如果移动使用：

$(document).on('mousemove',function () {

(某些情况下的边界仍然可以使用工作。)

解决方法

不完美，但它的工作：

http://jsfiddle.net/coma/9p2CT/

删除真正的选择

::selection {
   background-color: transparent;
}

添加一些样式

span.highlight {
    background: #ADD6FF;
}

span.begin {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

span.end {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

pre.merge-end > span:last-child {
    border-bottom-right-radius: 0;
}

pre.merge-end + pre > span:last-child {
    border-top-right-radius: 0;
}

pre.merge-begin > span:first-child {
    border-bottom-left-radius: 0;
}

pre.merge-begin + pre > span:first-child {
    border-top-left-radius: 0;
}

将节点元素中的每个字符包起来

var format = function () {

    var before = -1;
    var html = $.trim(editor.text())
    .split("\n")
    .reverse()
    .map(function (line) {

        var a = line.length === before ? 'merge-end' : '';
        before = line.length;

        return '<pre class="' + a + '"><span>' + line.split('').join('</span><span>') + '</span></pre>';
    })
    .reverse()
    .join('');

    editor.html(html);
};

获取选定的节点并突出显示，照顾他们的父母

var getSelectednodes = function () {

    var i;
    var nodes = [];
    var selection = rangy.getSelection();

    for (i = 0; i < selection.rangeCount; ++i) {

        selection
        .getRangeAt(i)
        .getNodes()
        .forEach(function (node) {

            if ($(node).is('span')) {

                nodes.push(node);
            }
        });
    }

    return nodes;
};

var highlight = function (nodes,beforeNode) {

    var currentNode = $(nodes.shift()).addClass('highlight');
    var currentParent = currentNode.parent();

    if (beforeNode) {

        var beforeParent = beforeNode.parent();

        if (currentParent.get(0) !== beforeParent.get(0)) {

            currentNode.addClass('begin');
            beforeNode.addClass('end');
            beforeParent.addClass('merge-begin');
        }

    } else {

        currentNode.addClass('begin');
    }

    if (nodes.length) {

        highlight(nodes,currentNode);

    } else {

        currentNode.addClass('end');
    }
};

format();

$(document).on('mouseup',function () {

    $('.highlight').removeClass('highlight begin end');
    highlight(getSelectednodes());
});

感谢Tim Down Rangy！