Не работает :checked на radio button

259

15 апреля 2017, 23:18

Все работает, кроме одной вещи, у меня кнопка хоть убей, но не хочется оставаться нажатой. Уже все перепробовал. Нашел похожие кнопки на bootstrap, посмотрел как они там сделаны (в source коде), запутался окончательно. НЕ работает именно момент .button:focused, input:checked тоже самое. Помогите, пожалуйста.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Task 11</title>
    <style type="text/css">
        body {
            margin:                         0px;
            padding:                        50px;
            font-family:                    Verdana, sans-serif;
        }   
        .button-group {
            position:                       relative;
            display:                        inline-flex;
            vertical-align:                 middle;
        }
        .button-group > .button:hover {
            /*z-index:                      2;*/
        }
        .button-group > .button:focus, .button-group > .button:active {
            /*z-index:                      2;*/
        }
        .button-group > .button:not(:first-child):not(:last-child) {
            border-radius:                  0;
        }
        .button-group > .button:first-child {
            margin-left:                    0;
        }
        .button-group > .button:first-child:not(:last-child) {
            border-top-right-radius:        0;
            border-bottom-right-radius:     0;
        }
        .button-group > .button:last-child:not(:first-child) {
            border-top-left-radius:         0;
            border-bottom-left-radius:      0;
        }
        .button-group .button + .button {
            margin-left:                    -1px;
        }
        .button {
            position:                       relative;
            display:                        inline-block;
            width:                          80px;
            text-align:                     center;
            vertical-align:                 middle;
            border:                         thin solid lightgrey;
            border-radius:                  3px;
            padding:                        10px;
            background-color:               white;
            border-color:                   lightgrey;
            transition:                     all 0.1s ease-in-out;
        }
        .button:hover {
            background-color:               #ebebeb;
            cursor:                         pointer;
        }
        /* Это не работает. */
        .button:focus {
            background-color:               #ebebeb;
            box-shadow:                     inset 0 0 10px 2px lightgrey;
        }
        .button:active {
            box-shadow:                     inset 0 0 10px 2px lightgrey;
        }
        input[type="radio"] {
            box-sizing:                     border-box;
            padding:                        0;
        }
        /* Убирает значки radio, возможно из-за этого не работает?*/
        .button input[type="radio"] {
            position:                       absolute;
            clip:                           rect(0, 0, 0, 0);
        }
        /* Это не помогло. */
        input[type="radio"]:checked {
            background-color:               #ebebeb;
            box-shadow:                     inset 0 0 10px 2px lightgrey;
        }
    </style>
</head>
<body>
    <div class="button-group">
        <label class="button"><input type="radio" name="group">Left</label>
        <label class="button"><input type="radio" name="group">Middle</label>
        <label class="button"><input type="radio" name="group">Right</label>
    </div>
</body>

Answer 1

С такой структурой как у Вас не будет работать без применения скриптов.

Можно попробовать так:

body { 
            margin:                         0px; 
            padding:                        50px; 
            font-family:                    Verdana, sans-serif; 
        }    
        .button-group { 
            position:                       relative; 
            display:                        inline-flex; 
            vertical-align:                 middle; 
        } 
        .button-group > .button:hover { 
            /*z-index:                      2;*/ 
        } 
        .button-group > .button:focus, .button-group > .button:active { 
            /*z-index:                      2;*/ 
        } 
        .button-group > .button:not(:first-child):not(:last-child) { 
            border-radius:                  0; 
        } 
        .button-group > .button:first-child { 
            margin-left:                    0; 
        } 
        .button-group > .button:first-child:not(:last-child) { 
            border-top-right-radius:        0; 
            border-bottom-right-radius:     0; 
        } 
        .button-group > .button:last-child:not(:first-child) { 
            border-top-left-radius:         0; 
            border-bottom-left-radius:      0; 
        } 
        .button-group .button + .button { 
            margin-left:                    -1px; 
        } 
        .button { 
            position:                       relative; 
            display:                        inline-block; 
            width:                          80px; 
            text-align:                     center; 
            vertical-align:                 middle; 
            border:                         thin solid lightgrey; 
            border-radius:                  3px; 
            padding:                        10px; 
            background-color:               white; 
            border-color:                   lightgrey; 
            transition:                     all 0.1s ease-in-out; 
        } 
        .button:hover { 
            background-color:               #ebebeb; 
            cursor:                         pointer; 
        } 
        /* Это не работает. */ 
        input[type="radio"]:focus+.button { 
            background-color:               #ebebeb; 
            box-shadow:                     inset 0 0 10px 2px lightgrey; 
        } 
        .button:active { 
            box-shadow:                     inset 0 0 10px 2px lightgrey; 
        } 
        input[type="radio"] { 
            box-sizing:                     border-box; 
            padding:                        0; 
            display: none;  
        } 
        /* Убирает значки radio, возможно из-за этого не работает?*/ 
        /* .button input[type="radio"] { 
            position:                       absolute; 
            clip:                           rect(0, 0, 0, 0); 
        } */ 
        /* Это не помогло. */ 
        input[type="radio"]:checked+.button { 
            background-color:               #ebebeb; 
            box-shadow:                     inset 0 0 10px 2px lightgrey; 
        }

<div class="button-group"> 
  <input type="radio" name="group" id="s-1"><label for="s-1" class="button">Left</label> 
  <input type="radio" name="group" id="s-2"><label for="s-2" class="button">Middle</label> 
  <input type="radio" name="group" id="s-3"><label for="s-3" class="button">Right</label> 
</div>