Display full width background for selected items in jqTree

Question

OK, I have a simple nested list, styled with jqTree.

Playing with the inspector, I noticed the appended class, responsible for highlighting elements is jqtree-selected.

And the whole thing works quite ok. Except for one thing:

I want the selection background (with the blueish colour) to occupy the full width of the line, no matter which element is selected. (Currently, the node1 and node2 elements, behave fine, but their "children" elements, when highlighted, do not occupy the whole row)

Any ideas on how this can be achieved?

---

Demo: http://jsfiddle.net/80589tbx/

Answer 1

Well let's pseudo it... :)

.jqtree-selected> .jqtree-element::before {
    content:"";
    display:block;
    width:100%;
    position:absolute;
    top:0px;
    left:-100%;
    height:21px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(190, 224, 245)), to(rgb(137, 175, 202)));
}

Updated Fiddle

Thanks to the plugin, it already apply position:relative on .jqtree-element by default so we don't have to do it.