Перейти к публикации

Стилизация элементов input: radio и checkbox

holistic

Автор: holistic,
в DataLife Engine (Общие вопросы)

 Рассказать Подписчики 0

Рекомендованные сообщения

holistic

holistic 24

Опубликовано:
Опубликовано:

Вероятно на форуме есть ответ, но найти не получается никак...

Как, не меняя никаких файлов движка, быстро "переодеть", придать стиль для: 

<input type="radio">
<input type="checkbox">

Чтобы они выглядели точно так же красиво и стильно, как в самой Админке DLE ?

Подскажите пожалуйста, вероятно кто-то реализовывал?

Ссылка на сообщение
Поделиться на других сайтах
master27

master27 38

Опубликовано:
Опубликовано:
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

odys 384

Опубликовано:
Опубликовано:
2 часа назад, master27 сказал:

в конструкцию типа..

вот сейчас совсем не понятно — зачем???

у тега label уже есть класс.

.comments_subscribe {настраиваешь label}

.comments_subscribe input {настраиваешь input}

в твоём же случае, 2 раза label для одного input = маразм...

Ссылка на сообщение
Поделиться на других сайтах
Spyhog

Spyhog 65

Опубликовано:
Опубликовано: (изменено)
15 часов назад, holistic сказал:

Вероятно на форуме есть ответ, но найти не получается никак...

Как, не меняя никаких файлов движка, быстро "переодеть", придать стиль для: 


<input type="radio">
<input type="checkbox">

Чтобы они выглядели точно так же красиво и стильно, как в самой Админке DLE ?

Подскажите пожалуйста, вероятно кто-то реализовывал?

У меня на в правом блоке есть опрос. Стиль чекбоксу сделан только при помощи css без скриптов.

1foto.1540204144.png

Вот код: 

.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 и сделал вот так:

2foto.1540204212.png

 

Вот 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");}

Изменено пользователем Spyhog
Ссылка на сообщение
Поделиться на других сайтах
celsoft

celsoft 6 095

Опубликовано:
Опубликовано:
1 час назад, odys сказал:

вот сейчас совсем не понятно — зачем???

Согласен. Человек зачем то прикрутил дополнительный label внутрь, в котором для оформления нет никакой необходимости, это получилось попросту "масло масленное". Какие то весьма сложные действия для визуального оформления чекбокса.

Ссылка на сообщение
Поделиться на других сайтах
master27

master27 38

Опубликовано:
Опубликовано:
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

proba 57

Опубликовано:
Опубликовано:
19 часов назад, master27 сказал:

Логично стилизовать не инпут, а любой другой элемент.

Прорекламирую ;): https://sandev.pro/demo/checkbox.html

Внутренний label заменён span, но при желании можно попробовать обойтись даже без вложенного span.

Ссылка на сообщение
Поделиться на других сайтах
master27

master27 38

Опубликовано:
Опубликовано:
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

celsoft 6 095

Опубликовано:
Опубликовано:
В 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

holistic 24

Опубликовано:
Опубликовано: Автор
1 час назад, master27 сказал:

Подкорректировал предыдущий скрипт...

Спасибо, но скрипты неприемлемы для таких простых делов.

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

Прорекламирую

Да, но имел в виду простые checkbox, а не такие...

Короче, ответа никто не дал по-простому, только при помощи хитросплетений.

Будем искать, будем искать...

Ссылка на сообщение
Поделиться на других сайтах
odys

odys 384

Опубликовано:
Опубликовано:
2 часа назад, holistic сказал:

Будем искать, будем искать...

да чего там искать?

Разработчик тебе написал, что ни каких дополнительных скриптов или чего-нибудь ещё там нет, открой в админке инспектор (исследовать элемент) и возьми стили, которые там

  • Нравится 1
Ссылка на сообщение
Поделиться на других сайтах
Gameer

Gameer 311

Опубликовано:
Опубликовано:

@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/

Ссылка на сообщение
Поделиться на других сайтах
Gameer

Gameer 311

Опубликовано:
Опубликовано:
9 минут назад, Captain сказал:

Топик в уроки HTML/CSS превратился :)

А по существу есть что сказать или только флудить можешь?

Ссылка на сообщение
Поделиться на других сайтах
Captain

Captain 625

Опубликовано:
Опубликовано: (изменено)
9 минут назад, Gameer сказал:

А по существу есть что сказать или только флудить можешь?

Классы есть все и переназначить их можно, а за вас я их оформление в CSS писать не буду.

Изменено пользователем Captain
  • Нравится 1
Ссылка на сообщение
Поделиться на других сайтах
master27

master27 38

Опубликовано:
Опубликовано:
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

celsoft 6 095

Опубликовано:
Опубликовано:
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

holistic 24

Опубликовано:
Опубликовано: (изменено) Автор
В 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>

то всё получится без скриптов?

Изменено пользователем holistic
Ссылка на сообщение
Поделиться на других сайтах
Gameer

Gameer 311

Опубликовано:
Опубликовано:
20 минут назад, holistic сказал:

Т.е. если для кнопок (input) выбора вариантов ответов в опросах в постах я вытяну все стили оформления, как в Админке, для этого: 


<div class="pollanswer"><input id="vote" name="dle_poll_votes[]" type="checkbox" value="0"><label for="vote">Ответ</label></div>

то всё получится без скриптов?

Нет.

Ссылка на сообщение
Поделиться на других сайтах
odys

odys 384

Опубликовано:
Опубликовано:
32 минуты назад, holistic сказал:

то всё получится без скриптов?

ну смотря какой ты хочешь стиль для них

Ссылка на сообщение
Поделиться на других сайтах
holistic

holistic 24

Опубликовано:
Опубликовано: (изменено) Автор
38 минут назад, odys сказал:

ну смотря какой ты хочешь стиль для них

Я же написал - как в Админке..

Хотя ответ, судя по всей переписке - НЕТ.

О боги, как всё сложно.

В 10/23/2018 в 19:36, odys сказал:

Разработчик тебе написал, что ни каких дополнительных скриптов или чего-нибудь ещё там нет, открой в админке инспектор (исследовать элемент) и возьми стили, которые там

И к чему был твой ответ тогда?

Разраб написал... и что?

Сделать-то по-простому нельзя...

Изменено пользователем holistic
Ссылка на сообщение
Поделиться на других сайтах
radrigo

radrigo 182

Опубликовано:
Опубликовано: (изменено)
1 час назад, holistic сказал:

Сделать-то по-простому нельзя...

Всё прекрасно стилизуется, в интернете куча примеров. Например у себя на сайте я сделал везде подобные четбоксы. В данном случае используется только CSS

 

dcbd0eba7fc1.png

Изменено пользователем radrigo
Ссылка на сообщение
Поделиться на других сайтах
master27

master27 38

Опубликовано:
Опубликовано: (изменено)

Под итожу...

В 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

Изменено пользователем master27
орфографическая ошибка
Ссылка на сообщение
Поделиться на других сайтах
celsoft

celsoft 6 095

Опубликовано:
Опубликовано:
21 час назад, master27 сказал:

Если конструкция ("дефолтная Dle") - мы НЕ можем обойтись только стилями, требуется скрипт, кстати в модальных окнах тоже требуется отслеживание.

Не можете и нельзя вообще, это вещи совершенно разные. Обойтись только стилями прекрасно можно. Просто вы хотите чтобы вам дали конкретную верстку под ваш сайт. Для древних браузеров существуют такие селекторы как ::-webkit-input-placeholder:before например  

input[type="text"]::-webkit-input-placeholder:before { // your code }

Для разных браузеров это могут быть :-moz-placeholder, ::-moz-placeholder и :-ms-input-placeholder

Ссылка на сообщение
Поделиться на других сайтах
radrigo

radrigo 182

Опубликовано:
Опубликовано:
В 24.10.2018 в 10:07, master27 сказал:

НО это будет работать ТОЛЬКО в "Умных" браузерах - опера, хром, яндекс, НО Вы не забывайте что есть и другие браузеры, например IE11 и Firefox и ЕЩЁ всякие прошлые\действующие\будущие\лайт (которые даже flexbox не понимают) мобильные браузеры. Поэтому для меня подобные аргументы - не аргументы или "факты в студию".

 

По поводу flexbox не соглашусь, IE11 и Firefox отлично его понимаю. Я активно использую у себя на сайте и никаких проблем нет. Кстати, вот отличный онлайн сервис для добавления вендорных префиксов.

https://autoprefixer.github.io/ru/

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
 Рассказать
Подписчики 0
Перейти к списку тем
×
×
  • Создать...