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！

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

解决方法

猜你在找的HTML相关文章