[Tutorial] Inputs radio e checkbox com estilos diferentes

Item: [Tutorial] Inputs radio e checkbox com estilos diferentes
Rating: 1

por Luiz 27.03.18 23:10

Personalizar os inputs radio e checkbox

Com este tutorial, você poderá personalizar seus inputs de tipo radio e checkbox.

Personalizar os inputs radio e checkbox

TUTORIAIS, DICAS E ASTÚCIAS

Instalação do código Javascript

As páginas javascript ativas em seu fórum possibilita inserir scripts e jQuery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de Controle Seta Branca

Módulos

HTML e Javascript Seta Branca

Gestão dos códigos Javascript Seta Branca

Criar um novo javascript

[Tutorial] Inputs radio e checkbox com estilos diferentes Javaac10

[Tutorial] Inputs radio e checkbox com estilos diferentes 110111

Habilitar o gerenciamento dos códigos Javascript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum.

[Tutorial] Inputs radio e checkbox com estilos diferentes 110210

Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.

[Tutorial] Inputs radio e checkbox com estilos diferentes 110310

Investimento - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento. Neste caso, estaremos investindo em todas as páginas.

[Tutorial] Inputs radio e checkbox com estilos diferentes 110410

Código Javascript - Espaço destinado a receber o script que será ativado pelo administrador. Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento.

Após isso, adicione o código:

Código:: /** * Make your radio and checkbox inputs more fancy! * * @author Luiz~ * @author Kyo Panda * * @version 2.1 * @see <a href="http://ajuda.forumeiros.com/">Fórum dos Fóruns</a> * @licence MIT */ (function ($) { 'use strict'; /* * Main Styles. * You can also put this in your CSS, if you want. */ var faCustonInputStyles = [ '.fa-custom-label {', ' position: relative', '}', '', '.fa-custom-label input {', ' position: absolute;', ' opacity: 0;', '}', '', '.fa-custom-label.fa-label-checkbox input:checked ~ span.fa-input-icon i::before {', ' content: "\\f14a";', '}', '', '.fa-custom-label.fa-label-radio input:checked ~ span.fa-input-icon i::before {', ' content: "\\f058";', '}', '', '.fa-custom-label span.fa-input-icon i {', ' -moz-transition: all linear .075s;', ' -ms-transition: all linear .075s;', ' -o-transition: all linear .075s;', ' -webkit-transition: all linear .075s;', ' transition: all linear .075s;', ' -moz-transform: scale(1);', ' -ms-transform: scale(1);', ' -o-transform: scale(1);', ' -webkit-transform: scale(1);', ' transform: scale(1);', '}', '', '.fa-custom-label input:checked ~ span.fa-input-icon i {', ' -moz-transform: scale(1.2);', ' -ms-transform: scale(1.2);', ' -o-transform: scale(1.2);', ' -webkit-transform: scale(1.2);', ' transform: scale(1.2);', '}', ].join('\n'); $(function () { /* * "Put" the styles on <head>: */ $('<style>', { type: 'text/css', text: faCustonInputStyles, }).appendTo('head'); /* * For checkbox input types: */ $('input[type="checkbox"]').each(function () { var $this = $(this); var $label = $([ '<label class="fa-custom-label fa-label-checkbox">', ' ', ' ', ' ', '</label>', ].join('\n')) .insertAfter($this) ; $this.prependTo($label); }); /* * For radio input types: */ $('input[type="radio"]').each(function () { var $this = $(this); var $label = $([ '<label class="fa-custom-label fa-label-radio">', ' ', ' ', ' ', '</label>', ].join('\n')) .insertAfter($this) ; $this.prependTo($label); }); }); }(jQuery));

Após a instalação, o código já estará a resultar.

Resultado do tutorial: