Hola
Conseguí un tree en una web y lo estoy modificando para que sea como lo necesito.
El problema es que no se indicarle al css que cada nodo tiene su propia imagen a la izq.
El código html
<ol class="tree">
<li>
<label for="AOT">AOT</label> <input type="checkbox" checked disabled id="AOT" />
<ol>
<li>
<label for="DataDictionary">Data Dictionary</label> <input type="checkbox" id="DataDictionary" />
<ol>
<li>
<label for="Tables">Tables</label> <input type="checkbox" id="Tables" />
<label for="EDT">EDT</label> <input type="checkbox" id="EDT" />
</li>
</ol>
<label for="Macro">Macro</label> <input type="checkbox" id="Macro" />
</li>
</ol>
</li>
</ol>
y el css
ol.tree
{
padding: 0 0 0 30px;
width: 300px;
}
li
{
position: relative;
margin-left: -15px;
list-style: none;
}
li input
{
position: absolute;
left: 0;
margin-left: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
height: 1em;
width: 1em;
top: 0;
}
li input + ol
{
background: url(toggle-small-expand.png) 40px 0 no-repeat;
margin: -0.938em 0 0 -44px; /* 15px */
height: 1em;
}
li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
li label
{
background: url(folder.png) 15px 1px no-repeat;
cursor: pointer;
display: block;
padding-left: 37px;
}
li input:checked + ol
{
background: url(toggle-small.png) 40px 5px no-repeat;
margin: -1.25em 0 0 -44px; /* 20px */
padding: 1.563em 0 0 80px;
height: auto;
}
li input:checked + ol > li { display: block; margin: 0 0 0.125em; /* 2px */}
li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }
En todos los nodos me aparece la misma imagen la de la carpeta folder.png.
Muchas gracias