[Решено] настройка стилей в корзине simple

Тема в разделе "OpenCart", создана пользователем etens1212, 12 авг 2016.

  1. etens1212

    etens1212

    Регистрация:
    1 май 2013
    Сообщения:
    320
    Симпатии:
    16
    Здравствуйте, есть проблема с кнопками "С регистрацией или без"

    Код:
     <label>
                           <input type="radio" name="register" value="1" <?php echo $register == 1 ? 'checked="checked"' : ''; ?> reload="customer_register" />
                          <?php echo $text_yes ?>
                          </label>
                         
                         
                         
                          <label>
                         <input type="radio" name="register" value="0" <?php echo $register == 0 ? 'checked="checked"' : ''; ?> reload="customer_not_register" />
                         
                          <?php echo $text_no ?>
                         
                          </label>
    если input вынести за label то мой css код работает

    Код:
    .simple-content input[type=radio] + label {
        background: #f5f5f5;
        padding: 10px;
        padding: 10px;
    }
    
    .simple-content input[type=radio]:checked + label {
        background: #cfcfcf;
    }
    но после этого - не работают сами кнопки
    как сделать, чтобы input


    был внутри, но стиль на него принимался
    при активном - другой background ?????????
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.050
    Симпатии:
    777
    Если вы хотите применить эти стили к инпуту внутри лейбла, то просто укажите правильный порядок слелекторов:
    Код:
    .simple-content label input[type=radio] 
     
    etens1212 нравится это.
  3. etens1212

    etens1212

    Регистрация:
    1 май 2013
    Сообщения:
    320
    Симпатии:
    16
     
    Lasted edited by : 13 авг 2016
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.050
    Симпатии:
    777
    Вы не то показываете. Вместо файла стилей покажите инспектор кода с выбранным тегом инпута и сразу сами поймёте, соответствует ли это правило этому инпуту и не переопределяет ли его что-то другое.
     
  5. etens1212

    etens1212

    Регистрация:
    1 май 2013
    Сообщения:
    320
    Симпатии:
    16
     
    Lasted edited by : 13 авг 2016
  6. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.050
    Симпатии:
    777
    Чем это отличается от предыдущего скрина?
    Я говорил о первой вкладке.

    И заворачивайте такие огромные скрины под спойлер.
     
  7. etens1212

    etens1212

    Регистрация:
    1 май 2013
    Сообщения:
    320
    Симпатии:
    16
    ну смотрите
    я добавил стиль в simple css

    Вы сказали попробовать в инспектор добавить
    2 скрин в инспекторе

    но результата не дало (
     
  8. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.050
    Симпатии:
    777
    Я не это сказал!
    Я сказал открыть первую вкладку (Elements) и выбрать в ней тег инпута, после чего посмотреть, какие стили к этому инпуту применены, есть ли среди них тот, который вы добавили и ничего ли его не переопределяет.
     
  9. etens1212

    etens1212

    Регистрация:
    1 май 2013
    Сообщения:
    320
    Симпатии:
    16
    нет вроде...
    посмотрите, если можете

    только в корзину, то добавьте
     
  10. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.050
    Симпатии:
    777
    Ну, во-первых я на этих инпутах вообще не вижу ваших стилей. Не знаю, куда вы их вписывали, но явно куда-то не туда.
    А во-вторых, посмотрев в живую я понял одну абсолютно очевидную вещь: эти стили надо вешать на лейбл, а не инпут. Помимо того, что у них display: none - это радиокнопки, а они не стилизуются, в принципе (их только подменить можно).

    Собственно, ваш первоначальный код был именно для лейблов, а не инпутов, потому он и работал, когда инпут выносился из лейбла. А работал он только при выносе потому, что + указывает на то, что эти теги рядом на одном уровне и идут последовательно в том же порядке, как в правиле.

    Так что для неактивного состояния нужно такое правило:
    Код:
    .simple-content label.radio {
        background: #f5f5f5;
        padding: 10px;
        padding: 10px;
    }
    И соответственно, добавить на сам лейбл класс radio. Без дополнительного класса стили будут приментся ко всем лейблам в этой форме.

    А вот с активным состоянием средствами css ничего сделать не получится, ибо css не умеет определять что-либо по потомкам. Тут уже понадобиться js.

    В файле /catalog/view/javascript/simplecheckout.js после строки 642 добавить:
    Код:
    $("label.radio").has(":checked").addClass('checked');
    $("label.radio").has(":not(:checked)").removeClass('checked');
    И, соответственно, в стилях для активного состояния теперь будет:
    Код:
    .simple-content label.radio.checked {
        background: #cfcfcf;
    }
     
  11. etens1212

    etens1212

    Регистрация:
    1 май 2013
    Сообщения:
    320
    Симпатии:
    16
    Благодарю Вас, все получилось!!!)))
    очень активная тема - стилизация simple
    а то стандартные radio не так привлекательны