"Formulario de registro"
Bulma 0.4.1 Snippet by abas

Post to Facebook Tweet this

<link href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.min.css" rel="stylesheet" id="bootstrap-css"> <script src=""></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.0/css/bulma.min.css"> <body class="columns" style="margin: 10px 25px;"> <div class="column is-4"> <article class="message is-info"> <div class="message-header "> <h2>Editar Usuario</h2> </div> <div class="message-body field"> <form action=""> <div class="columns"> <div class="column"> <label for="nombre" class="label">Nombre: </label> <div class="control"> <input type="text" class="input" placeholder="Nombre completo"> </div> </div> </div> <div class="columns"> <div class="column"> <label for="usuario" class="label">Usuario: </label> <div class="control has-icons-left"> <input type="text" class="input"> <span class="icon is-small is-left"> <i class="fa fa-user"></i> </span> </div> </div> <div class="column"> <div class="field"> <label class="label">Contraseña</label> <div class="control has-icons-right has-icons-left"> <input class="input" type="password" id="pass"> <span class="icon is-small is-left"> <i class="fa fa-refresh"></i> </span> <span class="icon is-small is-right"> <i class="fa fa-eye" id="show-pass"></i> </span> </div> </div> </div> </div> <div class="columns"> <div class="column"> <label for="email" class="label">Email: </label> <div class="control"> <input type="email" class="input" placeholder="Correo electrónico"> </div> </div> <div class="column"> <label for="tel" class="label">Teléfono: </label> <div class="control"> <input type="tel" class="input"> </div> </div> </div> <div class="columns"> <div class="column"> <label for="hInicio" class="label">Hora de Llegada: </label> <div class="control"> <input type="text" class="input" placeholder="00:00:00"> </div> </div> <div class="column"> <label for="hFinal" class="label">Hora de Salida: </label> <div class="control"> <input type="text" class="input" placeholder="00:00:00"> </div> </div> </div> <div class="columns"> <div class="column"> <label for="fechaExp" class="label">Fecha de Expiración: </label> <div class="control"> <input type="date" class="input" placeholder="aaaa-mm-dd"> </div> </div> <div class="column"> <label for="perfil" class="label">Perfil (Vista): </label> <div class="control has-icons-left"> <div class="select"><select> <option>Usuario</option> <option>With options</option> </select></div> <div class="icon is-small is-left"> <i class="fa fa-user"></i> </div> </div> </div> </div> <div class="columns"> <div class="column"> <label for="acceso" class="label">Días de acceso: </label> <div class="control"> <input type="checkbox" name="domingo" value="Domingo"> Domingo<br> <input type="checkbox" name="lunes" value="Lunes"> Lunes<br> <input type="checkbox" name="martes" value="Martes"> Martes<br> <input type="checkbox" name="miercoles" value="Miercoles"> Miércoles<br> <input type="checkbox" name="jueves" value="Jueves"> Jueves<br> <input type="checkbox" name="viernes" value="Viernes"> Viernes<br> <input type="checkbox" name="sabado" value="Sabado"> Sábado<br> </div> </div> </div> <a class="button is-info" id="save"> <span class="icon"> <i class="fa fa-save"></i> </span> <span>Guardar</span> </a> </form> </div> </article> </div> <div class="column is-8"> </div> </body>
#save{ width: 100%; } [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after { content: '✔'; position: absolute; top: .1em; left: .3em; font-size: 1.3em; line-height: 0.8; color: #09ad7e; transition: all .2s; } [type="checkbox"]:not(:checked) + label:after { opacity: 0; transform: scale(0); } [type="checkbox"]:checked + label:after { opacity: 1; transform: scale(1); } [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before { content: ''; position: absolute; left: 0; top: 0; width: 1.25em; height: 1.25em; border: 2px solid #ccc; background: #fff; border-radius: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,.1); }

Related: See More

Vue Argon Design System
Formulario de registro

Questions / Comments: