1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

Изменение checkbox'a

Тема в разделе "Вопросы по стилям, изменения в CSS и шаблонах", создана пользователем madwizard, 14 янв 2015.

Загрузка
  1. madwizard

    madwizard Новичок

    Регистрация:
    24.12.14
    Сообщения:
    12
    Симпатии:
    0
    Версия XF:
    1.4.3
    Доброго времени суток, не подскажите пожалуйста как изменить стиль чекбокса?

    Пробовал сделать по примеру(2-ой чекбокс). Но ничего не получается, точнее при наведении галочка появляется, но вот при клике она не остается. Предполагаю, что проблема возникает в псевдо-классе :checked.
     
  2. Exile

    Exile Местный

    Регистрация:
    27.06.11
    Сообщения:
    999
    Симпатии:
    543
    Версия XF:
    1.4.4
    madwizard, без ссылки на проблемную страницу (где не проставляется) - гадание на кофейной гуще.
     
  3. madwizard

    madwizard Новичок

    Регистрация:
    24.12.14
    Сообщения:
    12
    Симпатии:
    0
    Версия XF:
    1.4.3
    Дело в том, что я работаю на локальном сервере и ссылки предоставить не могу.

    Но суть проблемы проста. Вставив следующий код в любой шаблон .css:

    HTML:
    /* SQUARED TWO */
    .squaredTwo {
        width: 28px;
        height: 28px;
        background: #fcfff4;
    
        background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
        margin: 20px auto;
    
        -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        position: relative;
    }
    
    .squaredTwo label {
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        left: 4px;
        top: 4px;
    
        -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    
        background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
        background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
        background: -o-linear-gradient(top, #222 0%, #45484d 100%);
        background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
        background: linear-gradient(top, #222 0%, #45484d 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
    }
    
    .squaredTwo label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        content: '';
        position: absolute;
        width: 9px;
        height: 5px;
        background: transparent;
        top: 4px;
        left: 4px;
        border: 3px solid #fcfff4;
        border-top: none;
        border-right: none;
    
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    
    .squaredTwo label:hover::after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
        filter: alpha(opacity=30);
        opacity: 0.3;
    }
    
    .squaredTwo input[type=checkbox]:checked + label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
    }
    
    И следующий в любую страницу:

    HTML:
    <!-- Rounded TWO -->
    <div class="roundedTwo">
        <input type="checkbox" value="None" id="roundedTwo" name="check" />
        <label for="roundedTwo"></label>
    </div>
    галочка не будет проставляться.
    --- добавлено : Jan 14, 2015 10:21 AM ---
    Проблема решена. Простая невнимательность.

    п.с. не работайте по ночам. Лучше с утречка бодрячком :)
     
    Последнее редактирование модератором: 22 янв 2015

Поделиться этой страницей