» »

Стилизация CheckBox в настройках пользователя

Стилизация CheckBox в настройках пользователя

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

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

Установка :

В CSS или страница редактирования данных пользователя и вставляем перед :

Код
<style>
input[type="checkbox"] { display: none; }

input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"] + label:last-child { margin-bottom: 0; }

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #6cc0e5;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
</style>

Если есть еще решение, по плиз можете поделиться в комментариях.

Было взято, сайта www.7uarts.ga
30.10.2017 Просмотров: 306 Комментарий: (25)

Поделиться в социальных сетях

Материал разместил

Комментарий: 25
andruha061
andruha061 30.10.2017 21:261
-2
ля ля ля источник не указываем, ля ля ля)
Kosten
Kosten 30.10.2017 21:462
0
Но по понятным причинам видать не могу указать, что означает, источник мне не известен.
andruha061
andruha061 30.10.2017 21:493
-2
я тебя понял) просто изначально этот материал появился у меня на сайте я думал ты его у меня взял.
Kosten
Kosten 30.10.2017 22:394
0
Возможно даже с вашего, точно сказать не могу, просто в последнее время по забугорным ресурсам хожу, в плане CSS.

Источник в материал пепенесу.
andruha061
andruha061 30.10.2017 22:445
-2
спасибо) скорее всего кто-то взял его у меня, не указал источник, поэтому получилась такая неразбериха)
Kosten
Kosten 30.10.2017 23:026
0
andruha061, может есть стили на форму добавление, сам бы установил.
-SAM-
-SAM- 31.10.2017 01:139
0
Это стили вообще для стилизации чекбоксов посредством CSS3, для всего сайта. Как уже объяснял, чтобы стили применить к конкретному участку шаблона, то перед кодом стиля на input нужно прописать названия id или class, который присвоен блоку, в которых input находиться. И соответственно стили прописать по приоритету, как этот блок выводиться (например, если на форуме, то в стили форума или в общую таблицу стилей). Тут его предлагают дописывать прям в код шаблона страницы персональной пользователя (и за это требовать ставить источник, якобы их решение, хотя сам код взят из интернета - морального права не имеют).
-SAM-
-SAM- 31.10.2017 04:4114
0
А нет никакой неразберихи, код решения и постер материала слиты с s-sd ру. Ваше только то, что решили его запихать на страницу правки ... если кто в другое место ставить собрался - тоже ходить и просить источник указывать начинать?
-SAM-
-SAM- 31.10.2017 00:537
0
Всё верно, источник не указывать, поскольку не ваше решение.
-SAM-
-SAM- 31.10.2017 01:2610
0
Укажите лучше сами источник, откуда стянули код стиля.
Kosten
Kosten 31.10.2017 01:008
0
Здесь по поисковой системе посмотреть можно, менять почти не чего не буду, просто сам характер подачи изменил, с источника, и где был, с какого ресурса взят.
-SAM-
-SAM- 31.10.2017 01:4611
-1
В том и дело, что взято не с их сайта. Если даже и пихать в код шаблона персональной, то под условный оператор <?if($PAGE_ID$='useredit')?> Тут стили <?endif?> перед </head>.
-SAM-
-SAM- 31.10.2017 01:5712
0
Сорри, фигню написал я... тут же для страницы правки, шаблон свой есть - всё правильно, исправьте там, что перед </head> (слово в исходный код ушло просто). Ну, а что касается слов "Если есть еще решения" - есть конечно, публиковались уже и на zornet, такие материалы нужно тегом помечать "checkbox", "чекбокс" - тогда они будут выводиться сразу в блоке похожих материалов. Вот пример материала. Суть всё та же, как оно делается.
-SAM-
-SAM- 31.10.2017 03:4413
0
andruha061
andruha061 04.11.2017 14:2615
-2
слушай ты меня че то раздражать начинаешь.
какая разница мое это решение или нет, от куда я его взял и так далее.
Прикол заключается в том что материал был взят у меня, есть один человек его зовут Milan Shubin, он взял материал от сюда и не указал источник потому что забыл, его тут же забанили на zornet. хотя материал тоже не автора от Zornet. в таком случае его забанили просто так.
Это во первых. во вторых я собрал данные стили для чекбоксов из уроков которые учил, поэтому захотелось выложить пусть и такую мелочь.(такой код стилей имеется только у меня на сайте)
Я у тебя не собираюсь спрашивать что мне публиковать а что нет.
Свое мнения по этому поводу ты тоже можешь оставить при себе.
Мне давно известно кто ты и что тебя половина сайта здесь ненавидит за твои бабские придирки по поводу каждой мелочи и за то что слишком умный где не надо.
(не забудь обидеться и забанить меня)
Kosten
Kosten 04.11.2017 14:4416
0
Но во первых, если, что бывает огорчаюсь, но не как не в обяднике, во вторых, один раз требовал источник у Позитивчика, года 3 назад, это на шаблон, что мне делали, и не когда не у кого не требовал ставить источника, видать знакомый немного попутал.
andruha061
andruha061 04.11.2017 15:0417
0
хорошо, за что был заблокирован данный пользователь?
Kosten
Kosten 04.11.2017 15:1918
+2
andruha061, вам не кажется, что это уже перебор, по докладу вам за каждого забаненого. Ну с начало нужно думать, что писать, на такие вопросы в Лс не отвечаю даже, а здесь вам весь расклад нужен, бросайте таким заниматься.
andruha061
andruha061 04.11.2017 15:2919
-3
в таком случае попрошу вашего друга тоже не умничать и не лезть куда его не просят, если не нравится, удалите материалы которые были взяты у меня и хватит рассуждать на пустые темы.
То ему css код слишком длинный, то стили ему не понравились. Просто если вы за базар отвечать не умеете и разговаривать, а только сидеть за компом и обсуждать чужие материалы, то в прочем мне не о чем больше с вами разговаривать.
Я знаю как ты костен сам меняешь стили, меняешь классы к примеру class="disign" на свой "class="zornet" и так далее.
Как берете чужие описание, переворачиваете их так что ничего не понятно, дабы поисковики считали ваши материалы первоисточником.
Не надо этого лицемерия, надо сначало с себя начать а потом учить других что и как им делать.
Я больше всего не люблю вот такие пустые разговоры не о чем.
Я не собираюсь тут не с кем ругаться, просто раздражает когда так делают.
Давай я щас возьму материал с вашего сайта, найду изъяны и начну на весь сайт кричать какой у вас хреновый материал. По кайфу будет? Думаю что нет.
Kosten
Kosten 04.11.2017 15:3320
0
Удачи, бан, просто непробиваемый человек!
Slavik
Slavik 04.11.2017 15:4921
0
Мда, тут и даже сказать не чего), -SAM-, доведет любого :D
Kosten
Kosten 04.11.2017 15:5322
0
Slavik, тут дело не в пользователе -SAM-, но человек нормально просто не может общаться, по сути. Он берет общее с головы, другой бы его с первого поста в бан отправил, но зачем эти рамсы, что ты хотел доказать, что крут, а доказал, что интернет панторез, не хотел блокировать, но сам он видать больше этого хотел.
Slavik
Slavik 05.11.2017 10:5425
+1
Я в шутку сказал), все твои сообщение про источник полностью поддерживаю. Выдавать материал других за свой, ну это плохо..
-SAM-
-SAM- 05.11.2017 06:2623
0
avatar