शुद्ध सीएसएस पर चयन को अनुकूलित करें

<!-- ,       --> <label for="select" class="select"> <!--           .         --> <input type="radio" name="list" value="not_changed" id="bg" checked /> <!--        "" --> <input type="radio" name="list" value="not_changed" id="select"> <!--      ,        --> <label class="bg" for="bg"></label> <!--   -   ,  #text - ,  ,     --> <div class="items"> <!-- ,           --> <input type="radio" name="list" value="first_value" id="list[0]"> <!--   --> <label for="list[0]">First option</label> <!-- ,          [1] --> <input type="radio" name="list" value="second_value" id="list[1]"> <!-- ,          [1] --> <label for="list[1]">Second loooooong option</label> <!--    .  ,     --> <span id="text">Select something...</span> </div> </label> 

 /*   ,     */ input { display: none; } /*    (     .items) */ #text { position: absolute; display: block; top: 0; padding-left: 10px; } /*     - ,   line-height(    ;     4px, ..     border   2px   ) */ .select { display: inline-block; width: 160px; height: 34px; line-height: 30px; position: relative; } /*   , ,     */ .select:before { content: ">"; display: inline-block; background: white; position: absolute; right: -5px; top: 2px; z-index: 2; width: 30px; height: 26px; text-align: center; line-height: 26px; border: 2px solid #ddd; transform: rotate(90deg); cursor: pointer; } /*    ,      ,     */ .select input[name="list"]:not(:checked) ~ #text { color: black; background: white; } /*   - ,          ,          ,       */ .select input[name="list"]:checked ~ #text { background: transparent; color: transparent; z-index: 2; } /*    */ #select:disabled ~ .items #text { background: #eee; } /*    . min-height       , overflow     (. ) */ .items { display: block; min-height: 30px; position: absolute; border: 2px solid #ddd; overflow: hidden; width: 160px; cursor: pointer; } /*    ,     30px(  ,         ) */ #select:not(:checked) ~ .items { height: 30px; } /*  ( )   */ .items label { border-top: 2px solid #ddd; display: none; padding-left: 10px; background: white; } /*      -     */ .items label:hover { background: #eee; cursor: pointer; } /*    -   */ #select:checked ~ .items { padding-top: 30px; } /*    ,       */ #select:checked ~ .items label { display: block; } /*  -   ,    (    ) */ .items input:checked + label { display: block!important; border: none; background: white; } /*        ,      ,    . background    */ #select:checked ~ .bg { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 0; background: rgba(0,0,0,0.4); }