Круглый флажок работает неправильно на мобильном устройстве

У меня есть код, который создает эффект «круглого» флажка.Круглый флажок работает неправильно на мобильном устройстве

Он отлично работает на моем настольном ПК, но на мобильном устройстве, если вы не касаетесь его в нужном месте (в нижней правой части), тогда этот флажок не активируется.

Я просто задавался вопросом, знал ли кто-нибудь, как сделать этот код более надежным на мобильном устройстве или я застрял, используя медиа-запрос, чтобы установить нормальный флажок для мобильных пользователей?

Здесь я установил codePen, чтобы вы могли видеть эффект.

HTML, заключается в следующем:

<section title="JTroundCheckbox"> 
    <div class="JTroundCheckbox"> 
    <input type="checkbox" value="<?php echo $value; ?>" name="checkbox1" id="checkbox1"> 
    <label for="checkbox1"></label> 
    </div> 
</section>

CSS-это:

.JTroundCheckbox { 
    width: 28px; 
    height: 28px; 
    position: relative; 
    margin: 20px auto; 
    background: #fcfff4; 
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5); 
    -webkit-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); 
} 
.JTroundCheckbox label { 
    width: 20px; 
    height: 20px; 
    position: absolute; 
    top: 4px; 
    left: 4px; 
    cursor: pointer; 
    background: -moz-linear-gradient(top, #222222 0%, #45484d 100%); 
    background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%); 
    background: linear-gradient(to bottom, #222222 0%, #45484d 100%); 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
    -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white; 
    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white; 
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white; 
} 
.JTroundCheckbox label:after { 
    content: ''; 
    width: 9px; 
    height: 5px; 
    position: absolute; 
    top: 5px; 
    left: 4px; 
    border: 3px solid #fcfff4; 
    border-top: none; 
    border-right: none; 
    background: transparent; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 
    opacity: 0; 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -webkit-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 
.JTroundCheckbox label:hover::after { 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); 
    opacity: 0.3; 
} 
.JTroundCheckbox input[type=checkbox] { 
    visibility: hidden; 
} 
.JTroundCheckbox input[type=checkbox]:checked + label:after { 
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); 
    opacity: 1; 
}

Это код, который взял из сети от here. (например, меченого закругленными TWO в коде)

Большое спасибо за любой свет, который вы можете пролить на это.

источник

2015-04-09 John T

С Element Inspector вашего браузера, обязательно проверьте положение флажка и если метка работает для этого нужно, у меня были подобные проблемы с эффектами, как этот, а иногда решение было для создания более крупной метки. – Zentaurus

Привет, Зентавр, я посмотрю на это, когда вернусь домой сегодня вечером, но я помню, как «фактический» флажок был очень маленьким пунктирным квадратом в нижней правой части основного круга. Поэтому я предполагаю, что это то, на что полагаются, чтобы попасть на мобильный телефон. Я буду экспериментировать с большим ярлыком и посмотреть, что произойдет. Спасибо за подсказку :-) –

Как насчет этого? http://codepen.io/nathanw/pen/PwrNLz

Я удалил скрытый атрибут из флажка и поместил его прямо под фэнтезийным флажком. Кажется, он отлично работает на iPad.

.JTroundCheckbox input[type=checkbox] { 
    /* visibility: hidden; */ 
    position: relative; 
    top:4px; 
    left:4px; 
}

источник

2015-04-09 13:57:28 NateW

= Genius! Огромное спасибо за это Нейт. Теперь это рабочие нагрузки. Приветствия :-) –

Круглый флажок работает неправильно на мобильном устройстве

ответ

Смежные вопросы