Стилизация checkbox и radio

[LADYX 90]

Добрый день!

Помогите, пожалуйста, разобраться. Все checkbox и radio DLE выводит без классов. И поэтому указывая в стиле просто input[type='checkbox'], этот стиль соответственно применяется ко всем этим элементам. Все это работает во всех современных браузерах. А вот в ie11 не работает. Если же у checkbox и radio указать в коде (представим, что DLE так выводит) класс, например class="checkbox ", и в файле стилей пишем не input[type='checkbox'], а .checkbox, то в ie11 мы уже видим, что хотели. Вот что скажете на эту тему, хотелось бы услышать комментарии или советы. Или я чего-то не догоняю, или хорошо бы в дальнейших версиях DLE присвоить всем checkbox и radio классы, чтобы было проще ими управлять?

 

Вот к примеру, мы не можем сейчас в стиле указать вот так:

.checkbox { vertical-align: top; margin: 0 3px 0 0; width: 17px; height: 17px; } 
.checkbox + label { cursor: pointer; }
.checkbox:not(checked) { position: absolute; opacity: 0; }
.checkbox:not(checked) + label { position: relative; padding: 0 0 0 60px; }
.checkbox:not(checked) + label:before { content: ''; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); } 
.checkbox:not(checked) + label:after { content: ''; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: all .2s; } 
.checkbox:checked + label:before { background: #9FD468; } 
.checkbox:checked + label:after { left: 26px; }
.checkbox:focus + label:before { box-shadow: 0 0 0 3px rgba(255,255,0,.5); }

Вот так ie11 прекрасно все понимает.

 

Поэтому нам сейчас приходится делать так:

input[type='checkbox'] { vertical-align: top; margin: 0 3px 0 0; width: 17px; height: 17px; }
input[type='checkbox'] + label { cursor: pointer; }
input[type='checkbox']:not(checked) { position: absolute; opacity: 0; }
input[type='checkbox']:not(checked) + label { position: relative; padding: 0 0 0 60px; }
input[type='checkbox']:not(checked) + label:before { content: ''; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); }
input[type='checkbox']:not(checked) + label:after { content: ''; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: all .2s; }
input[type='checkbox']:checked + label:before { background: #9FD468; }
input[type='checkbox']:checked + label:after { left: 26px; }
input[type='checkbox']:focus + label:before { box-shadow: 0 0 0 3px rgba(255,255,0,.5); }

Но так ie11 уже ничего не понимает.

 

 

Изменено 16 сентября 2017 пользователем LADYX

[alex32 942]

Ну можно же просто обернуть чекбоксы и радио в блоки с нужным классом и стилизовать уже так 

.class_block input {
стили чекбокса
}

теоретически везде работать должно

[master27 38]

14 часа назад, LADYX сказал:

хорошо бы в дальнейших версиях DLE присвоить всем checkbox и radio классы

Присоединяюсь.

В тех файлах шаблона, где нет возможности обернуть "checkbox и radio" в дополнительный класс без использования скриптов, обернуть бы в определённый класс, а мы бы от него отталкивались.

[celsoft 6 081]

14 часа назад, LADYX сказал:

Помогите, пожалуйста, разобраться. Все checkbox и radio DLE выводит без классов.

Правильно, чтобы вам дать больше возможностей для оформление.

 

14 часа назад, LADYX сказал:

И поэтому указывая в стиле просто input[type='checkbox'], этот стиль соответственно применяется ко всем этим элементам.

А вот это уже неправильно. Все стили в CSS могут наследоваться от родительских элементов, а не просто применяться ко всем input. Например в шаблоне

<div class="checkbox">тут мои чекбоксы</div>

а в CSS

.checkbox input {
тут мои любые стили для чекбоксов.
}

 

3 минуты назад, master27 сказал:

В тех файлах шаблона, где нет возможности обернуть "checkbox и radio" в дополнительный класс без использования скриптов, обернуть бы в определённый класс, а мы бы от него отталкивались.

Таких шаблонов нет. Все можно обернуть в свои классы. 

[master27 38]

33 минуты назад, celsoft сказал:

Таких шаблонов нет. Все можно обернуть в свои классы. 

Вы меня не поняли, конечно можно, не спорю.

Повторюсь "без использования дополнительных скриптов, которые и оборачивают чекбоксы и радиокнопки определённым дивом", мы же потом с этим дивом работаем, стилизуем.

Возьмём форму добавления новости и в частности тег "{admintag}" - Вывод дополнительных опций для администратора и что мы видим...

<input id="allow_comm" type="checkbox" checked="checked" value="1" name="allow_comm">
<label for="allow_comm">Разрешить комментарии</label>
<input id="allow_main" type="checkbox" checked="checked" value="1" name="allow_main">
<label for="allow_main">Публиковать на главной</label>
<br>
<input id="approve" type="checkbox" checked="checked" value="1" name="approve">
<label for="approve">Опубликовать на сайте</label>
<br>
<input id="allow_rating" type="checkbox" checked="checked" value="1" name="allow_rating">
<label for="allow_rating">Разрешить рейтинг статьи</label>
<br>
<input id="news_fixed" type="checkbox" value="1" name="news_fixed">
<label for="news_fixed">Зафиксировать на сайте</label>

ну оберните изначально "инпут + лабел" в див с классом так как это сделано для опросов в новостях или голосованиях на сайте.

то есть...

<div class="pollanswer">
<input id="vote" type="checkbox" value="0" name="dle_poll_votes[]">
<label for="vote"> Добро пожаловать 1</label>
</div>

всё. мы легко можем стилизовать или нет конкретные чекбоксы и т.д.

Аналогично форма добавления комментария - подписка на комментарий, редактор "FroalaEditor (WYSIWYG)", я вам писал про это, демо обновили.

<label class="comments_subscribe">
<input id="allow_subscribe" type="checkbox" value="1" name="allow_subscribe">
Подписаться на комментарии
</label>

иными словами, что бы верстальщику не искать по всем файлам и не сравнивать как конкретно, для каких групп и в этом файле выводятся чекбоксы\радиокнопки дабы не изворачиваться с оформлением и предлагаю прийти к какому нибудь единому стандарту - обернуть в определённый класс.

Повторюсь

Цитата

Все можно обернуть в свои классы.

Знаю, но согласитесь нам было бы намного легче.

[LADYX 90]

2 часа назад, celsoft сказал:

Правильно, чтобы вам дать больше возможностей для оформление.

Конечно, это приветствуется. Это правильно, это хорошо, и это очень удобно. И за это конечно же спасибо.

 

Единственное, как это я увидел для себя, исключение составили, к сожалению, checkbox и radio. Если сделать так:

2 часа назад, celsoft сказал:

<div class="checkbox">тут мои чекбоксы</div>

то в стиле нужно будет прописать в любом случае так:

.checkbox input[type='checkbox'] { тут стили }

И именно input[type='checkbox'] тот же ie 11 (а раз 11-й не понимает, возможно какие-нибудь браузеры также будут воротить носом), такая гадина, не понимает. Вот в чем дело. Вот я и не знаю, как здесь лучше. И это:

2 часа назад, celsoft сказал:

Правильно, чтобы вам дать больше возможностей для оформление.

правильное решение, и при этом же checkbox и radio не удается стилизовать кроссбраузерно. Получаются, ножницы. Подскажите что-нибудь, дайте совет, примите верное решение. Просто хочется сделать как лучше, и в то же время правильно.

[alex32 942]

3 часа назад, LADYX сказал:

Единственное, как это я увидел для себя, исключение составили, к сожалению, checkbox и radio. Если сделать так:

6 часов назад, celsoft сказал:

<div class="checkbox">тут мои чекбоксы</div>

то в стиле нужно будет прописать в любом случае так:

.checkbox input[type='checkbox'] { тут стили }

 

достаточно будет прописать 

.checkbox input{ тут стили }

а такое, насколько я знаю, осел понимает 

[LADYX 90]

14 минуты назад, alex32 сказал:

а такое, насколько я знаю, осел понимает

Ну для осла может быть и нет разницы, что стилизовать, input[type='checkbox'], или input[type="text"], или input[type=radio], или input[type=еще какой-нибудь. А вот для меня, например, есть. На примере первого моего сообщения напишите, пожалуйста, вариант стилизации checkbox и проверьте его в том же ie11, и если осел покажет именно то, чего мы добиваемся, тогда ослу можно будет поставить памятник при жизни.

[celsoft 6 081]

 

6 часов назад, LADYX сказал:

Ну для осла может быть и нет разницы, что стилизовать, input[type='checkbox'], или input[type="text"], или input[type=radio], или input[type=еще какой-нибудь. А вот для меня, например, есть.

Вы в свой див обернули только чекбоксы, соответственно достаточно .checkbox input, без всяких [type='checkbox'] т.к. в этом диве у вас нет других инпутов.

[LADYX 90]

Прошу прощения, точно, что же до меня то не доперло сразу. Действительно, буду пробовать.

[odys 384]

В 17.09.2017 в 09:21, master27 сказал:

ну оберните изначально "инпут + лабел" в див с классом так как это сделано для опросов в новостях или голосованиях на сайте.

<style>
  .admintag input {}
  .admintag label {}
</style>

<div class="admintag">{admintag}</div>

в чём сложность?

[LADYX 90]

odys, привет!

23 часа назад, odys сказал:

в чём сложность?

Да, все верно. Так же я уже и сделал. Это я просто что-то совсем ступил))

 

В 17.09.2017 в 10:21, master27 сказал:

обернуть в определённый класс

к примеру чекбоксам на странице юзера присвоить класс checkbox_userinfo, чекбоксам на для голосований на сайте checkbox_vote (радиокнопкам radio_vote), чекбоксам опросам в новостях checkbox_poll (радиокнопкам radio_poll), т.е. приписывая, к примеру, имя шаблона? Да, может быть было бы и удобно, по крайней мере - не помешало бы. А там кто его знает. Кому надо, тот уже и прописывает стиль там где ему нужно. Кому не надо, тот ничего не прописывает. Одним словом, пища для размышления. И конечно на усмотрение разработчика.

[celsoft 6 081]

8 минут назад, LADYX сказал:

к примеру чекбоксам на странице юзера присвоить класс checkbox_userinfo, чекбоксам на для голосований на сайте checkbox_vote (радиокнопкам radio_vote), чекбоксам опросам в новостях checkbox_poll (радиокнопкам radio_poll), т.е. приписывая, к примеру, имя шаблона? Да, может быть было бы и удобно, по крайней мере - не помешало бы. А там кто его знает. Кому надо, тот уже и прописывает стиль там где ему нужно. Кому не надо, тот ничего не прописывает. Одним словом, пища для размышления. И конечно на усмотрение разработчика.

Как раз таки вы это и можете сделать, т.к. все это находится в разных шаблонах и разных местах, и вы можете назначить разным кнопкам, какие угодно имена стилей и соответственно оформления. И как раз таки вписывание этого в код движка неудобно и нецелесообразно. Т.к. разработчику шаблона нужно будет искать и запоминать эти названия, вместо того чтобы назначить самому свои по усмотрению.

[LADYX 90]

2 часа назад, celsoft сказал:

Как раз таки вы это и можете сделать

Так а как же мы это сделаем? Если в шаблонах vote.tpl и poll.tpl у нас только теги: {list}, и движок сам выводит все чекбоксы и радио. А в userinfo.tpl: {news-subscribe}, {comments-reply-subscribe} и другие, и также все чекбоксы в php. Вот, например, вывод голосований на сайте, что выводит движок (да вы и сами же знаете):

<div id="dle-vote">
<div class="vote"><input id="vote_check0" name="vote_check" type="radio" checked="checked" value="0"><label for="vote_check0"> Ответ 1</label></div>
<div class="vote"><input id="vote_check1" name="vote_check" type="radio" value="1"><label for="vote_check1"> Ответ 2</label></div>
<div class="vote"><input id="vote_check2" name="vote_check" type="radio" value="2"><label for="vote_check2"> Ответ 3</label></div>
</div>

Вот об этом речь. Ну это конечно всё на ваше усмотрение, как вы посчитаете правильным и нужным.

 

А вот кстати, уверен, будет нужным в тему: Во всех голосованиях, как на сайте, так и в новостях, где радиокнопки, по умолчанию всегда выводится отмеченным первый вариант ответа. Вы знаете, мы обратили внимание, что очень часто кликают сразу, не выбирая вариант ответа, и скорее часто это бывает не ради цели проголосовать. Конечно, считаю (это мое мнение), правильным бы не отмечать по умолчанию первый или какой-то другой вариант ответа. Ну а если посетитель кликнул, не выбрав вариант ответа, то кнопку в этом случае делать просто неактивной. Вы знаете, не подумайте, что это какие-то прихоти, это совсем не сложно сделать такую правку, но поверьте, это действительно очень важно. Не стоит делать выбор за посетителя, а хочешь не хочешь, выходит это так, что мы его делаем.

[odys 384]

13 минуты назад, LADYX сказал:

Так а как же мы это сделаем?

#dle-vote .vote input {}

это называется раздули проблему из не чего...

[LADYX 90]

12 минуты назад, odys сказал:

это называется раздули проблему из не чего...

Ну почти, бывает  Это я почему-то создал эту тему, просто сглупил. Практики уже много лет, а здесь как в первый раз увидел, удивляюсь сам себе.

Конечно, это вовсе и не обязательно. Просто тут еще master27 высказался, и я как вариант написал

3 часа назад, LADYX сказал:

к примеру чекбоксам 

ну и так далее... Да закрывайте тему, и правда ни к чему.. Прошу прощения за перебаламутство