holistic 24 Опубликовано: 21 октября 2018 Рассказать Опубликовано: 21 октября 2018 Вероятно на форуме есть ответ, но найти не получается никак... Как, не меняя никаких файлов движка, быстро "переодеть", придать стиль для: <input type="radio"> <input type="checkbox"> Чтобы они выглядели точно так же красиво и стильно, как в самой Админке DLE ? Подскажите пожалуйста, вероятно кто-то реализовывал? Цитата Ссылка на сообщение Поделиться на других сайтах
master27 38 Опубликовано: 22 октября 2018 Рассказать Опубликовано: 22 октября 2018 10 часов назад, holistic сказал: Вероятно на форуме есть ответ, но найти не получается никак... Не раз предлагал или отписывался в подобных вопросах. Так же писал в пожелания, но видимо это никому не нужно... Для себя решил скриптом, который возвращает конструкцию из.. <label class="comments_subscribe"> <input id="allow_subscribe" type="checkbox" value="1" name="allow_subscribe"> Подписаться на комментарии </label> в конструкцию типа.. <label class="comments_subscribe sd-checkbox"> <input id="allow_subscribe" type="checkbox" value="1" name="allow_subscribe"> <label for="allow_subscribe">Подписаться на комментарии</label> </label> теперь мы можем оперировать конструкцией - ".sd-checkbox input:checked + label" присваивая необходимые стили. сам код вставляем ниже в подключаемый код ".js" $('[type="checkbox"]').each(function() { var t = $(this), e = $(t).parent('label').addClass('sd-checkbox'); if (0 < e.length) { var n = $(e).text(), i = $("<label for=" + t.attr("name") + ">" + n + "</label>"); if ($(t).attr("id")) { i = $("<label for=" + t.attr("id") + ">" + n + "</label>"); } t.after(i), $(e).each(function() { $(this).contents().filter(function() { return 3 === this.nodeType && $.trim(this.nodeValue).length }).replaceWith("") }) } else { $(t).parent('div').addClass('sd-checkbox'); } }); аналогично можете сделать для радио-кнопок. Поправьте, кто разбирается в скриптах, возможно я что-то не учёл или не правильно сделал, потому как слаб в этом деле. 1 Цитата Ссылка на сообщение Поделиться на других сайтах
odys 384 Опубликовано: 22 октября 2018 Рассказать Опубликовано: 22 октября 2018 2 часа назад, master27 сказал: в конструкцию типа.. вот сейчас совсем не понятно — зачем??? у тега label уже есть класс. .comments_subscribe {настраиваешь label} .comments_subscribe input {настраиваешь input} в твоём же случае, 2 раза label для одного input = маразм... Цитата Ссылка на сообщение Поделиться на других сайтах
Spyhog 65 Опубликовано: 22 октября 2018 Рассказать Опубликовано: 22 октября 2018 (изменено) 15 часов назад, holistic сказал: Вероятно на форуме есть ответ, но найти не получается никак... Как, не меняя никаких файлов движка, быстро "переодеть", придать стиль для: <input type="radio"> <input type="checkbox"> Чтобы они выглядели точно так же красиво и стильно, как в самой Админке DLE ? Подскажите пожалуйста, вероятно кто-то реализовывал? У меня на в правом блоке есть опрос. Стиль чекбоксу сделан только при помощи css без скриптов. Вот код: .vote_list input[type="radio"]{vertical-align:top;margin:0 3px 0 0;width:17px;height:17px} .vote_list input[type="radio"] + label{cursor:pointer} .vote_list input[type="radio"]:not(checked){position:absolute;opacity:0} .vote_list input[type="radio"]:not(checked) + label{color:#555;font-weight:400;position:relative;padding:0 0 0 60px} .vote_list input[type="radio"]:not(checked) + label:before{content:'';position:absolute;top:1px;left:0;width:50px;height:20px;border-radius:13px;background:#CDD1DA} .vote_list input[type="radio"]:not(checked) + label:after{content:'';position:absolute;top:3px;left:2px;width:18px;height:16px;border-radius:50%;background:#FFF;transition:all .2s} .vote_list input[type="radio"]:checked + label:before{background:#a1c4d2} .vote_list input[type="radio"]:checked + label:after{left:30px} А в профиле редактирование информации о себе обернул в класс userinfo-style и сделал вот так: Вот css: .userinfo-style input[type="checkbox"]:not(checked) + label {font-weight:normal;cursor:pointer;} .userinfo-style input[type="checkbox"]{vertical-align:top;margin:0 3px 0 0;width:17px;height:17px;} .userinfo-style input[type="checkbox"] + label{cursor:pointer;} .userinfo-style input[type="checkbox"]:not(checked){position:absolute;opacity:0;} .userinfo-style input[type="checkbox"]:not(checked) + label{font-weight:400;position:relative;padding:0 0 0 27px;} .userinfo-style input[type="checkbox"]:not(checked) + label:before{content:'';position:absolute;top:3px;left:0;width:15px;height:15px;border-radius:3px;background:#d1d4d7;} .userinfo-style input[type="checkbox"]:not(checked) + label:after{content:'';position:absolute;top:6px;left:3px;width:9px;height:9px;transition:all .2s;} .userinfo-style input[type="checkbox"]:checked + label:before{background:#20a8d8;} .userinfo-style input[type="checkbox"]:checked + label:after{background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");} Изменено 22 октября 2018 пользователем Spyhog Цитата Ссылка на сообщение Поделиться на других сайтах
celsoft 6 095 Опубликовано: 22 октября 2018 Рассказать Опубликовано: 22 октября 2018 1 час назад, odys сказал: вот сейчас совсем не понятно — зачем??? Согласен. Человек зачем то прикрутил дополнительный label внутрь, в котором для оформления нет никакой необходимости, это получилось попросту "масло масленное". Какие то весьма сложные действия для визуального оформления чекбокса. Цитата Ссылка на сообщение Поделиться на других сайтах
master27 38 Опубликовано: 22 октября 2018 Рассказать Опубликовано: 22 октября 2018 3 часа назад, odys сказал: .comments_subscribe input {настраиваешь input} я кажется понял, что вы имеете ввиду. проблема вся в том, что все эксперименты я проводил в браузере мозила 43.0.1 - (мне удобнее) и 62.0.3 (на данный момент последняя версия). если я правильно понял (поправьте, могу ошибаться) в ИЕ и Мозила цитирую.. Цитата «Нельзя использовать ::after и ::before для элементов, которые не могут иметь содержимое, например <input/>.» то есть Яндекс, Опера, Хром стилизуют инпуты. Вопросов нет. Вопрос - каким образом выйти из положения чтобы все браузеры поддерживали?. Логично стилизовать не инпут, а любой другой элемент. В таком случае, визуальное оформление, отслеживание состояния инпута сводится к конструкции "input:checked + другой элемен" в моём случае "label" 1 час назад, celsoft сказал: Человек зачем то прикрутил дополнительный label внутрь как раз для этих целей, хотя согласен, было бы логичнее применять "спан" и от него отталкиваться. celsoft ответьте, почему вы в админке не стилизовали просто инпуты? а применили конструкцию из дополнительных элементов? 2 часа назад, Spyhog сказал: У меня на в правом блоке есть опрос. Стиль чекбоксу сделан только при помощи css без скриптов. не только в правом блоке, ещё опросы в новостях, к ним тоже можете аналогично применить свои стили, потому как конструкция позволяет. По итогу, ткните носом, может чего не знаю, не понимаю, или дайте пример реализации, потому как автор темы и спрашивал.. 17 часов назад, holistic сказал: Чтобы они выглядели точно так же красиво и стильно, как в самой Админке DLE ? + без дополнительных скриптов. Цитата Ссылка на сообщение Поделиться на других сайтах
proba 57 Опубликовано: 23 октября 2018 Рассказать Опубликовано: 23 октября 2018 19 часов назад, master27 сказал: Логично стилизовать не инпут, а любой другой элемент. Прорекламирую : https://sandev.pro/demo/checkbox.html Внутренний label заменён span, но при желании можно попробовать обойтись даже без вложенного span. Цитата Ссылка на сообщение Поделиться на других сайтах
master27 38 Опубликовано: 23 октября 2018 Рассказать Опубликовано: 23 октября 2018 3 часа назад, proba сказал: Внутренний label заменён span 23 часа назад, master27 сказал: хотя согласен, было бы логичнее применять "спан" и от него отталкиваться. В 22.10.2018 в 00:15, holistic сказал: Подскажите пожалуйста, вероятно кто-то реализовывал? Подкорректировал предыдущий скрипт... $("[type=checkbox]").each(function() { var t = $(this), e = $(t).parent('label').addClass('sd-checkbox'), i = $("<span>" + $(e).text() + "</span>"); if (0 < e.length) { t.after(i), $(e).each(function() { $(this).contents().filter(function() { return 3 === this.nodeType && $.trim(this.nodeValue).length }).replaceWith("") }) } }); + стили, или свои пропишите... .sd-checkbox { display: block; margin: 0.25em 0 0.5em 0; position: relative; } .sd-checkbox:hover span:before { border-color: red;/*или меняем на любой цвет*/ } .sd-checkbox input { display: block; float: left; font-size: inherit; height: 1.5em; margin: 0; outline: 0 none; visibility: hidden; width: 1.5em; } .sd-checkbox span { clear: both; cursor: pointer; display: inline; line-height: 1.25em; padding-left: 0.75em; } .sd-checkbox span:before, .sd-checkbox span:after { bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; } .sd-checkbox span:before { background-color: transparent; border: 2px solid rgba(0, 0, 0, 0.5); border-radius: 0.175em; cursor: pointer; height: 1.25em; transition: background-color 0.35s ease 0s, border-color 0.35s ease 0s; width: 1.25em; } .sd-checkbox input:checked + span:before { background-color: red; border-color: red; } .sd-checkbox input:checked + span:after { border-color: white; border-style: none none solid solid; border-width: 0.25em; height: 0.375em; transform: translate(0.25em, 0.336538em) rotate(-45deg); width: 0.75em; } Цитата Ссылка на сообщение Поделиться на других сайтах
celsoft 6 095 Опубликовано: 23 октября 2018 Рассказать Опубликовано: 23 октября 2018 В 22.10.2018 в 14:40, master27 сказал: celsoft ответьте, почему вы в админке не стилизовали просто инпуты? а применили конструкцию из дополнительных элементов? Где вы это увидели, если вы посмотрите исходный код страниц админпанели, то увидите что DLE использует HTML конструкцию <div class="checkbox"> <label><input class="icheck" type="checkbox" id="approve" name="approve" value="1" checked>Опубликовать новость на сайте</label> </div> Никаких дополнительных label или span Цитата Ссылка на сообщение Поделиться на других сайтах
holistic 24 Опубликовано: 23 октября 2018 Рассказать Опубликовано: 23 октября 2018 Автор 1 час назад, master27 сказал: Подкорректировал предыдущий скрипт... Спасибо, но скрипты неприемлемы для таких простых делов. 6 часов назад, proba сказал: Прорекламирую Да, но имел в виду простые checkbox, а не такие... Короче, ответа никто не дал по-простому, только при помощи хитросплетений. Будем искать, будем искать... Цитата Ссылка на сообщение Поделиться на других сайтах
odys 384 Опубликовано: 23 октября 2018 Рассказать Опубликовано: 23 октября 2018 2 часа назад, holistic сказал: Будем искать, будем искать... да чего там искать? Разработчик тебе написал, что ни каких дополнительных скриптов или чего-нибудь ещё там нет, открой в админке инспектор (исследовать элемент) и возьми стили, которые там 1 Цитата Ссылка на сообщение Поделиться на других сайтах
Gameer 311 Опубликовано: 23 октября 2018 Рассказать Опубликовано: 23 октября 2018 @holistic DLE использует Uniform => http://opensource.imanov.net/uniform $(".icheck").uniform({ radioClass: 'choice', wrapperClass: 'border-teal-600 text-teal-800', fileDefaultHtml: filedefaulttext, fileButtonHtml: filebtntext, fileButtonClass: 'btn bg-teal btn-sm btn-raised' }); .checkbox { min-height: 29px; position: relative; display: block; } .checkbox, .checkbox-inline { margin-top: -3px; margin-bottom: 0; } .checkbox label { display: inline-block; max-width: 100%; min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: normal; cursor: pointer; } .checkbox .checker, .checkbox-inline .checker { position: absolute; top: 1px; left: 0; } .text-teal-800, .text-teal-800:focus, .text-teal-800:hover { color: #00695c!important; } .border-teal-600 { border-color: #00897b; } .checker, .checker span, .checker input { width: 18px; height: 18px; } .checker { position: relative; display: inline-block; cursor: pointer; vertical-align: middle; } .checker span { color: #455A64; border: 2px solid #607D8B; display: inline-block; text-align: center; position: relative; border-radius: 2px; } .checker span.checked { border-color: inherit; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; } .checker[class*=border-] span { color: inherit; } .checker input[type=checkbox] { border: none; background: none; display: -moz-inline-box; display: inline-block; margin: 0; vertical-align: top; cursor: pointer; position: absolute; top: -2px; left: -2px; z-index: 2; opacity: 0; filter: alpha(opacity=0); } .checker span.checked:after { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .checker span:after { content: "\f00c"; font-family: 'FontAwesome'; font-size: 16px; color: inherit; line-height: 1; position: absolute; top: -1px; left: -1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition-duration: 0.1s; transition-duration: 0.1s; } <div class="checkbox"><label><input class="icheck" type="checkbox" id="approve" name="approve" value="1">Чекбокс</label></div> jQuery(function($){ $(".icheck").uniform({ wrapperClass: 'border-teal-600 text-teal-800', fileButtonClass: 'btn bg-teal btn-sm btn-raised' }); }); Стили поправите под себя уже сами. Еще нужно скачать и подключить у себя http://opensource.imanov.net/uniform/ Цитата Ссылка на сообщение Поделиться на других сайтах
Captain 625 Опубликовано: 23 октября 2018 Рассказать Опубликовано: 23 октября 2018 Топик в уроки HTML/CSS превратился 1 Цитата Ссылка на сообщение Поделиться на других сайтах
Gameer 311 Опубликовано: 23 октября 2018 Рассказать Опубликовано: 23 октября 2018 9 минут назад, Captain сказал: Топик в уроки HTML/CSS превратился А по существу есть что сказать или только флудить можешь? Цитата Ссылка на сообщение Поделиться на других сайтах
Captain 625 Опубликовано: 23 октября 2018 Рассказать Опубликовано: 23 октября 2018 (изменено) 9 минут назад, Gameer сказал: А по существу есть что сказать или только флудить можешь? Классы есть все и переназначить их можно, а за вас я их оформление в CSS писать не буду. Изменено 23 октября 2018 пользователем Captain 1 Цитата Ссылка на сообщение Поделиться на других сайтах
master27 38 Опубликовано: 24 октября 2018 Рассказать Опубликовано: 24 октября 2018 15 часов назад, holistic сказал: имел в виду простые checkbox Для простых. https://pr-kenig.ru/blog/view/checkbox-theme там же можете позаимствовать стили. 13 часов назад, odys сказал: Разработчик тебе написал, что ни каких дополнительных скриптов или чего-нибудь ещё там нет, открой в админке инспектор (исследовать элемент) и возьми стили Вы немного не правы, расписал ниже. 7 часов назад, Captain сказал: Классы есть все и переназначить их можно Вы (и все те, кто будет подобное утверждать - на будущее) тоже немного не правы на счёт классов. Посмотрите ссылку выше (для holistic) и то что я писал выше предыдущими постами, а именно... Все мы живём в 21 веке и всем наверняка приятно видеть на сайтах, в приложениях для телефонов - красивые, удобные, анимированные и т.д. переключатели в виде чек-боксов, радио-кнопок или рычажков-переключателей. Повторюсь, по ссылке выше, это можно сделать, НО это будет работать ТОЛЬКО в "Умных" браузерах - опера, хром, яндекс, НО Вы не забывайте что есть и другие браузеры, например IE11 и Firefox и ЕЩЁ всякие прошлые\действующие\будущие\лайт (которые даже flexbox не понимают) мобильные браузеры. Поэтому для меня подобные аргументы - не аргументы или "факты в студию". По факту НЕОБХОДИМО универсальное решение, которое попытаюсь описать ниже. 17 часов назад, celsoft сказал: Никаких дополнительных label или span Тут вы конечно немного схитрили, но приоткрыли завесу, действительно, дополнительных "label" или "span" нету, НО у вашего инпута есть класс "icheck" и мы уже можем обращаться не напрямую к инпуту, а к элементу страницы с определённым классом. Понимаете разницу? Посему второй наводящий вопрос - почему вы для себя добавили класс в инпуты, тем самым облегчив себе задачу, а для нас, пользователей видимой части сайта - нет? Можно немного отойду от темы? (лирика) Давайте разберём пару конструкций, что бы не дублировать код постоянно. 1 - назовём её условно "Блочная". код взял из bootstrap <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> То есть "input + label". 2 - назовём её "Инлайновая" код взял из materializecss <label> <input type="checkbox" class="filled-in" checked="checked" /> <span>Filled in</span> </label> То есть "input" вложен в "label". Как видим обе конструкции подлежат стилизации посредством псевдо-тегов. В "блочной" конструкции мы опираемся в стилях на "input + label" и "input:checked + label" В "инлайновой" конструкции мы опираемся на "input + span" и "input:checked + span" Всё просто и логично, по мне первый вариант предпочтительнее, проще. А в вашей конструкции, что вы нам предлагаете... <label class="comments_subscribe"> <input id="allow_subscribe" type="checkbox" value="1" name="allow_subscribe"> Подписаться на комментарии </label> мы должны посредством скриптов добавить в "инпут" класс "icheck" + как подсказал Gameer подключить библиотеку "Uniform" + снова подключить скрипт, который нам вернёт конструкцию... <div class="checkbox"> <label> <div id="uniform-approve" class="checker border-teal-600 text-teal-800"> <span class="checked"> <input id="approve" class="icheck" type="checkbox" checked="" value="1" name="approve"> </span> </div> Опубликовать новость на сайте </label> </div> + подключить у кого нет библиотеку "FontAwesome" и стилизовать. Так что ли? celsoft? То есть вместо того чтобы вам одному подвинуться и изменить конструкцию (край добавить класс в инпут). Вы предлагаете нам (сколько вы говорите пользователей, сотни, несколько сотен? тысячи) изобретать самим, утяжеляя шаблоны... Думаю для всех понятно, что там, где можно обойтись стилями, смысла использования скриптов нету. Простите. Тут должен быть смайлик, который бьётся головой об стену. Замечу, я вам это предлагал в личных сообщениях ещё (4.09.2017 11:38) Цитата Ссылка на сообщение Поделиться на других сайтах
celsoft 6 095 Опубликовано: 24 октября 2018 Рассказать Опубликовано: 24 октября 2018 1 час назад, master27 сказал: Тут вы конечно немного схитрили, но приоткрыли завесу, действительно, дополнительных "label" или "span" нету, НО у вашего инпута есть класс "icheck" и мы уже можем обращаться не напрямую к инпуту, а к элементу страницы с определённым классом. Понимаете разницу? Нет никакой разницы, и вы не ее понимаете. input это такой же элемент страницы, и обращение к нему по классу или по элементу одинаково. И вам выше расписали как работает админпанель DLE, и дали стили, где нет никакой привязке к классу icheck непосредственно для оформления. 1 час назад, master27 сказал: Повторюсь, по ссылке выше, это можно сделать, НО это будет работать ТОЛЬКО в "Умных" браузерах - опера, хром, яндекс, НО Вы не забывайте что есть и другие браузеры, например IE11 и Firefox и ЕЩЁ всякие прошлые\действующие\будущие\лайт (которые даже flexbox не понимают) мобильные браузеры. Поэтому для меня подобные аргументы - не аргументы или "факты в студию". Запустите админпанель DLE, в этих браузерах и увидите корректное отображение. И наличие имени класса тут не причем. Класс задан для других целей, не чтобы привязывать к нему все оформление, а более универсально запускать JS плагин, без переделки файлов скриптов в случае обновления дизайна админпанели, и в самих PHP файлах делать минимум изменений в случае изменения в верстке. 1 час назад, master27 сказал: мы должны посредством скриптов добавить в "инпут" класс "icheck" + как подсказал Gameer подключить библиотеку "Uniform" + Зачем вы должны добавлять в input класс icheck? Нет в этом никакой необходимости. В админпанели DLE, это чтобы универсально подключить плагин JS $(".icheck")..... Вы что не умеете подключать плагины по другим селекторам? Только по имени класса? В DLE эти имена давно существуют, и остаются чтобы глобально все не править, и если править то минимум. Вам это зачем? Для каких целей? Цитата Ссылка на сообщение Поделиться на других сайтах
holistic 24 Опубликовано: 24 октября 2018 Рассказать Опубликовано: 24 октября 2018 (изменено) Автор В 10/23/2018 в 19:36, odys сказал: Разработчик тебе написал, что ни каких дополнительных скриптов или чего-нибудь ещё там нет, открой в админке инспектор (исследовать элемент) и возьми стили, которые там Т.е. если для кнопок (input) выбора вариантов ответов в опросах в постах я вытяну все стили оформления, как в Админке, для этого: <div class="pollanswer"><input id="vote" name="dle_poll_votes[]" type="checkbox" value="0"><label for="vote">Ответ</label></div> то всё получится без скриптов? Изменено 24 октября 2018 пользователем holistic Цитата Ссылка на сообщение Поделиться на других сайтах
Gameer 311 Опубликовано: 24 октября 2018 Рассказать Опубликовано: 24 октября 2018 20 минут назад, holistic сказал: Т.е. если для кнопок (input) выбора вариантов ответов в опросах в постах я вытяну все стили оформления, как в Админке, для этого: <div class="pollanswer"><input id="vote" name="dle_poll_votes[]" type="checkbox" value="0"><label for="vote">Ответ</label></div> то всё получится без скриптов? Нет. Цитата Ссылка на сообщение Поделиться на других сайтах
odys 384 Опубликовано: 24 октября 2018 Рассказать Опубликовано: 24 октября 2018 32 минуты назад, holistic сказал: то всё получится без скриптов? ну смотря какой ты хочешь стиль для них Цитата Ссылка на сообщение Поделиться на других сайтах
holistic 24 Опубликовано: 24 октября 2018 Рассказать Опубликовано: 24 октября 2018 (изменено) Автор 38 минут назад, odys сказал: ну смотря какой ты хочешь стиль для них Я же написал - как в Админке.. Хотя ответ, судя по всей переписке - НЕТ. О боги, как всё сложно. В 10/23/2018 в 19:36, odys сказал: Разработчик тебе написал, что ни каких дополнительных скриптов или чего-нибудь ещё там нет, открой в админке инспектор (исследовать элемент) и возьми стили, которые там И к чему был твой ответ тогда? Разраб написал... и что? Сделать-то по-простому нельзя... Изменено 24 октября 2018 пользователем holistic Цитата Ссылка на сообщение Поделиться на других сайтах
radrigo 182 Опубликовано: 24 октября 2018 Рассказать Опубликовано: 24 октября 2018 (изменено) 1 час назад, holistic сказал: Сделать-то по-простому нельзя... Всё прекрасно стилизуется, в интернете куча примеров. Например у себя на сайте я сделал везде подобные четбоксы. В данном случае используется только CSS Изменено 24 октября 2018 пользователем radrigo Цитата Ссылка на сообщение Поделиться на других сайтах
master27 38 Опубликовано: 25 октября 2018 Рассказать Опубликовано: 25 октября 2018 (изменено) Под итожу... В 24.10.2018 в 14:33, celsoft сказал: Зачем вы должны добавлять в input класс icheck? Нет в этом никакой необходимости. Вы правы, я провёл некоторые эксперименты, дополнительный класс не даёт нам никаких привилегий, что обращение к инпуту, что к классу инпута, одно и тоже. 18 часов назад, Gameer сказал: Нет. Вы неправы. Потому что конструкция (только в опросах) блочная (мои посты выше), можно обойтись стилями без js. Вот на скорую руку, для шаблона Default, в стилях меняем блок опросы.... /* Блок: Опросы */ @font-face { font-family: 'FontAwesome'; src: url('../../../engine/skins/fonts/fontawesome/fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('../../../engine/skins/fonts/fontawesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../../../engine/skins/fonts/fontawesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../../../engine/skins/fonts/fontawesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../../../engine/skins/fonts/fontawesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../../../engine/skins/fonts/fontawesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } .block_grey { padding: 25px; margin-bottom: 25px; border-radius: 2px; background-color: #e5e5e5; } .block_grey > .title { margin: 0 0 1em 0; font-size: 1em; letter-spacing: 0; } .vote_more { font-size: .9em; margin: -.7em 0 1em 0; } .vote_list { margin: 8% 0; } .vote_list .vote, .vote_list .pollanswer { margin-bottom: 5px; min-height: 25px; position: relative; } /*Курсор на pointer*/ .vote_list .vote > input + label, .vote_list .pollanswer > input + label { cursor: pointer; display: inline-block; padding-left: 25px; position: relative; } /*Прячем инпут*/ .vote_list .vote > input, .vote_list .pollanswer > input { display: none; } /*Заменяем скрытый элемент псевдо классом :before*/ .vote_list .vote > input + label:after, .vote_list .pollanswer > input + label:after { background-color: transparent; border: 2px solid #00695c; border-radius: 2px; box-sizing: border-box; content: ""; display: inline-block; height: 20px; left: 0; position: absolute; top: 1px; transition: all 0.25s ease-in-out 0s; width: 20px; } /*Круглые radio*/ .vote_list .vote > input[type="radio"] + label:after, .vote_list .pollanswer > input[type="radio"] + label:after { border-radius: 50%; } /*При клике на radio*/ .vote_list .vote > input[type="radio"]:checked + label:before, .vote_list .pollanswer > input[type="radio"]:checked + label:before { color: #00695c; content: "\f111"; font-family: "FontAwesome"; left: 4px; position: absolute; top: 0; transform: scale(0.65); } /*При клике на чекбокс*/ .vote_list .vote > input[type="checkbox"]:checked + label:before, .vote_list .pollanswer > input[type="checkbox"]:checked + label:before { color: #00695c; content: "\f00c"; font-family: "FontAwesome"; left: 3px; position: absolute; top: 1px; } .btn-border .icon-votes { width: 16px; height: 14px; margin: -3px 0 0 0; vertical-align: middle; } .vote_votes, .pollallvotes { font-size: .9em; } #dlevotespopupcontent { height: auto !important; overflow: visible !important; } как убрать код в спойлер? 17 часов назад, radrigo сказал: Всё прекрасно стилизуется, в интернете куча примеров. Процитирую сам себя.... В 24.10.2018 в 13:07, master27 сказал: Повторюсь, по ссылке выше, это можно сделать, НО это будет работать ТОЛЬКО в "Умных" браузерах - опера, хром, яндекс, НО Вы не забывайте что есть и другие браузеры, например IE11 и Firefox и ЕЩЁ всякие прошлые\действующие\будущие\лайт (которые даже flexbox не понимают) мобильные браузеры. Поэтому для меня подобные аргументы - не аргументы или "факты в студию". или дайте ссылку для изучения, возможно ваше решение будут единственно верным и простым. На меня не смотрите, я телемастер, сайты это хобби, и частенько подчёркиваю - "Возможно я не прав". В 24.10.2018 в 14:33, celsoft сказал: Для каких целей? В данном случае процитировал вас не по поводу ".icheck", а что бы вы ещё раз в тему заглянули и здраво проанализировали то, что я пытаюсь вам уже год донести. Если конструкция ("блочная") - мы можем обойтись только стилями. Если конструкция ("инлайновая" + есть любой элемент вместе с инпутом) - мы можем обойтись только стилями. Если конструкция ("дефолтная Dle") - мы НЕ можем обойтись только стилями, требуется скрипт, кстати в модальных окнах тоже требуется отслеживание. Если бы в Dle была или "блочная" или "инлайновая" конструкция, не было бы этой темы. как тут, спорили, спорили, а потом раз и сделали, лучше - лучше. удобнее - удобнее. https://forum.dle-news.ru/topic/71691-стилизация-checkbox-и-radio/?tab=comments#comment-358444 Изменено 25 октября 2018 пользователем master27 орфографическая ошибка Цитата Ссылка на сообщение Поделиться на других сайтах
celsoft 6 095 Опубликовано: 26 октября 2018 Рассказать Опубликовано: 26 октября 2018 21 час назад, master27 сказал: Если конструкция ("дефолтная Dle") - мы НЕ можем обойтись только стилями, требуется скрипт, кстати в модальных окнах тоже требуется отслеживание. Не можете и нельзя вообще, это вещи совершенно разные. Обойтись только стилями прекрасно можно. Просто вы хотите чтобы вам дали конкретную верстку под ваш сайт. Для древних браузеров существуют такие селекторы как ::-webkit-input-placeholder:before например input[type="text"]::-webkit-input-placeholder:before { // your code } Для разных браузеров это могут быть :-moz-placeholder, ::-moz-placeholder и :-ms-input-placeholder Цитата Ссылка на сообщение Поделиться на других сайтах
radrigo 182 Опубликовано: 26 октября 2018 Рассказать Опубликовано: 26 октября 2018 В 24.10.2018 в 10:07, master27 сказал: НО это будет работать ТОЛЬКО в "Умных" браузерах - опера, хром, яндекс, НО Вы не забывайте что есть и другие браузеры, например IE11 и Firefox и ЕЩЁ всякие прошлые\действующие\будущие\лайт (которые даже flexbox не понимают) мобильные браузеры. Поэтому для меня подобные аргументы - не аргументы или "факты в студию". По поводу flexbox не соглашусь, IE11 и Firefox отлично его понимаю. Я активно использую у себя на сайте и никаких проблем нет. Кстати, вот отличный онлайн сервис для добавления вендорных префиксов. https://autoprefixer.github.io/ru/ Цитата Ссылка на сообщение Поделиться на других сайтах
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.