.mtree, .mtree ul, .mtree li { padding: 0; margin: 0; padding-left: 10px; list-style: none; } .mtree input { position: absolute; opacity: 0; } .mtree { font: normal 12px "Segoe UI", Arial, Sans-serif; -moz-user-select: none; -webkit-user-select: none; user-select: none; } .mtree a{ color: #00f; text-decoration: none; } .mtree a:hover { text-decoration: underline; } .mtree input + label + ul { margin: 0 0 0 15px; } .mtree input ~ ul { display: none; } .mtree label, .mtree label::before { cursor: pointer; } .mtree input:disabled + label { cursor: default; opacity: .6; } .mtree input:checked:not(:disabled) ~ ul { display: block; } .mtree label, .mtree label::before { background: url("icons.png") no-repeat; } .mtree label, .mtree a, .mtree label::before { display: inline-block; height: 16px; line-height: 16px; vertical-align: middle; } .mtree label { background-position: 18px 0; } .mtree label::before { content: ""; width: 16px; margin: 0 22px 0 0; vertical-align: middle; background-position: 0 -32px; } .mtree input:checked + label::before { background-position: 0 -16px; } @media screen and (-webkit-min-device-pixel-ratio:0) { .mtree { -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s; } @-webkit-keyframes webkit-adjacent-element-selector-bugfix { from { padding: 0; } to { padding: 0; } } }