Question

我有这个：

<ul id="master">
<li><input type="checkbox" id="users"><label for="users">Users</label>
    <ul>
  <li><input type="checkbox" id="so"><label for="so">so seleciona</label>   </li>
        <li><input type="checkbox" id="Bra"><label for="Bra">Brad</label>
        </li>
        <li><input type="checkbox" id="Share"><label for="Share">Shared</label>
        </li>
    </ul>
</li>
<li><input type="checkbox" id="aa"><label for="aa">outra opção</label></li>
</ul>

我如何获得价值？

我做了demo

Answer 1

CSS

ul { margin: 0 0 -1em -12px; padding:1em 0 0 0; position:relative; border-color:#A2D3FF; }
    li { 
        padding:7px 0 7px 32px; 
        margin-left:0; 
        list-style:none; 
        font-size:13px; 
        position:relative;
  border-left: 1px solid;
  border-right: 1px solid;
    }
    li:first-child { 
      border: 1px solid;
      border-bottom: none;

}

    li::before { content:' '; 
        display:block; width:23px; height:1.5em; 
        position:absolute; left:-3px; top:-1em; 
    }
    li:first-child:before { height:2em; top:-1.5em; }
    /* FireFox ignores absolute positioning on the generated content */
    body:not([class*=""]) li:before {  margin-top:-1em; margin-bottom:-.6em ;margin-left:-35px; }
    body:not([class*=""]) li:first-child:before { margin-top:-1.55em; }

    li:last-child { //margin-left:3px; 
      border: 1px solid;
border-top: none;/* moves the text over by the same amount as the line would have */ }

    li input { left: 11px; z-index:1; margin-top:-1px; position:absolute;  }
    li label { font-weight:bold;  }
    li label::after {
        content: '';
        font-weight: normal;
        font-style: italic;
        font-size:80%;
        color:green;
    }
    li input:checked + label:after {
        content: ' '; 
        color:red;
    }

    /* special for the root of the list: */
    ul#master {margin-left:0; }
    ul#master > li:first-child:before { display:none; }
    ul#master > li:first-child { border-left-width: 0; border:none}
ul#master > li {border: none; margin-top: 7px;}

    /* here's the part that does the expanding and collapsing: */
    input + label + ul { display:none; }
    input:checked + label + ul { display:block; }

    h1 { font-size:18px; }
    h3 { font-size:15px; }
    p, code { font-size:12px; }

通过复选框

1 个答案: