Inicia sesión



Casillas de verificación personalizadas en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales de casillas de verificación personalizadas - Custom checkboxes en CSS3.
Background:transition, transform
<style>
  main {
    width: 100%;
    padding: 60px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    user-select: none;
    font: 14px / 1 Helvetica, sans-serif;
  }
  input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
  }
  input[type="checkbox"] + label {
    cursor: pointer;
    position: relative;
    line-height: 12px;
    user-select: none;
  }
  input[type="checkbox"] + label:not(:nth-of-type(1)) {
    margin-top: 29px;
    margin-bottom: 29px;
  }
  input[type="checkbox"]:checked + label{
    color: #b4a078;
  }
  input[type="checkbox"]:disabled + label {
    cursor: not-allowed;
    color: #999;
  }
  input[type="checkbox"] + label::before{
    content: "";
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 2px;
    vertical-align: top;
    margin-right: .2em;
    border: 1px solid #ccc;
    background-color: #fff;
    transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
  }
  input[type="checkbox"]:not(:disabled) + label:hover::before{
    border-color: #b4a078;
  }
  input[type="checkbox"] + label::after{
    content: "";
    display: inline-block;
    width: 3px; height: 7px;
    border: 1px solid #fff;
    border-top: 0;
    border-left: 0;
    position: absolute;
    left: 4px; top: 1px;
    transform: rotate(45deg) scale(0);
    transition: all .2s ease-in-out;
  }
  input[type="checkbox"]:checked + label::before{
    border-color: #b4a078 !important;
    background-color: #b4a078;
  }
  input[type="checkbox"]:checked + label::after{
    transform: rotate(45deg) scale(1);
    transition: all .2s ease-in-out;
  }
  input[type="checkbox"]:disabled + label::before,
  input[type="checkbox"]:disabled.checked + label::before{
    background-color: #f2f2f2;
  }
  input[type="checkbox"]:disabled.checked + label::after{
    border-color: #ccc;
    transform: rotate(45deg) scale(1);
  }
</style>

<main>
    <input type="checkbox" id="awesome1" checked>
    <label for="awesome1">Awesome</label>
    <input type="checkbox" id="awesome11">
    <label for="awesome11">Iconfont</label>
    <input type="checkbox" id="awesome12">
    <label for="awesome12">Tutoriales En Linea</label>
    <input type="checkbox" id="awesome2" disabled>
    <label for="awesome2">disable</label>
    <input type="checkbox" id="awesome3" disabled class="checked">
    <label for="awesome3">check disable</label>
</main>
Ver resultado


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-03-10
  • Categorias: Diseño Web CSS3 html5 WebSite Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Trading en Tacones – Mujeres empoderadas con las inversiones

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-05
  • Categorias: Forex Noticias Tutorial

Como agregar un icono de Font Awesome en CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-04
  • Categorias: Diseño Web @font-face WebSite webmasters Noticias Tutorial

Iconos sociales para Datalife engine y para cualquier sitio Web

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-04
  • Categorias: Diseño Web Redes Sociales WebSite webmasters Noticias Tutorial

Cursos que aún ofrecen certificados gratuitos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-26
  • Categorias: Cursos Noticias Tutorial Aprendizaje

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial