Registro de usuarios con campos personalizados

Preparación de la vitamina

Videotutorial de la vitamina

Código fuente de la vitamina

Reemplaza “.registro-personalizado” por tu clase o bien quítalo si quieres aplicar los mismos estilos a todos los formularios.

Formulario de registro

/* Formulario registro - Responsive */
@media screen and (max-width: 768px) {
    .user-registration.registro-personalizado .ur-form-row .ur-form-grid {
        margin-bottom: 0;    }
}
/* Formulario registro - Contenedor */
.user-registration.registro-personalizado {
    padding: 0;
    border: 0;
    margin: 0;
}
/* Formulario registro - Mensaje de error */
.user-registration.registro-personalizado .user-registration-error {
    font-size: 10px !important;
    border-top: 0;
}
/* Formulario registro - Icono de error */
.user-registration.registro-personalizado .user-registration-message::before, .user-registration.registro-personalizado .user-registration-error::before, .user-registration.registro-personalizado .user-registration-info::before {
    margin-right: 5px;
}
/* Formulario registro - Opciones - Espacio */
.user-registration.registro-personalizado .ur-form-row .ur-form-grid .ur-field-item.field-radio ul {
    padding: 0;
}
/* Formulario registro - Opciones - Botones - Defecto */
.user-registration.registro-personalizado .input-radio.ur-frontend-field {
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
/* Formulario registro - Opciones - Botones - General */
.user-registration.registro-personalizado .input-radio.ur-frontend-field:before {
    content: ' ';
    width: 15px;
    height: 15px;
    background: #fff;
    display: block;
    border-radius: 100%;
    margin-top: -2px;
    border: 1px solid;
}
/* Formulario registro - Opciones - Botones - Marcado */
.user-registration.registro-personalizado .input-radio.ur-frontend-field:checked:before {
    background: #000;
}
/* Formulario registro - Fondo desplegables */
.registro-personalizado.ur-frontend-form select {
    background-color: #fff !important;
}
/* Formulario registro - Botón de envío */
.user-registration.registro-personalizado .ur-submit-button {
    width: 100%;
    padding: 15px !important;
    color: #fff;
    border: 1px solid #000 !important;
    margin: 20px 0 0 0;
}

Cuenta personalizada

/* Cuenta personalizada - Formulario */
#user-registration {
    background-color: transparent;
    margin: 0;
}
.ur-frontend-form {
    border: 0;
}
#user-registration .user-registration-MyAccount-content {
    padding: 0;
}
#user-registration.horizontal .user-registration-MyAccount-navigation, #user-registration .user-registration-MyAccount-navigation {
    border-bottom: 0;
    padding-bottom: 0;
}
#user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link {
    text-align: center;
    padding: 0px;
    margin-bottom: 20px;
}
.user-registration-MyAccount-content p:last-child {
    display: none;
}
form.user-registration-EditAccountForm.edit-password p:last-child, form.user-registration-EditProfileForm.edit-profile p:last-child {
    display: block;
}
/* Cuenta personalizada - Menu */
nav.user-registration-MyAccount-navigation {
    padding-bottom: 25px;
}
#user-registration.vertical .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a {
    background: transparent;
}
#user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a {
    color: #fff;
    box-shadow: none;
    border: 0;
}
#user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a, #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a {
    background-color: transparent;
}
#user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a {
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px;
}
#user-registration.horizontal .user-registration-MyAccount-navigation ul, #user-registration .user-registration-MyAccount-navigation ul {
    justify-content: space-between;
}
a:active, a:hover {
    color: #000;
}
/* Cuenta personalizada - Estructura */
#user-registration.vertical .user-registration-MyAccount-navigation {
    width: 30%;
}
#user-registration.vertical .user-registration-MyAccount-content {
    width: 70%;
}
/* Cuenta personalizada - Botones */
input.user-registration-Button.button, button.user-registration-submit-Button.btn.button {
    background-color: #222;
    color: #fff;
    box-shadow: none;
    border-radius: 0;
}
/* Cuenta personalizada - Sombras */
#user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link, #user-registration, #user-registration.horizontal {
    box-shadow: none !important;
}
#user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a, #user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a {
    background-color: transparent;
}
li.ur-radio-list {
    display: inline !important;
        margin-right: 10px;
}
.user-registration-profile-fields__field-wrapper .ur-form-row {
    border-bottom: 0 !important;
    padding: 10px 0px!important ;
}
/* Cuenta personalizada - Opciones */
label.user-registration-form__label input, li.ur-radio-list input {
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
label.user-registration-form__label input:before, li.ur-radio-list input:before {
    content: ' ';
    width: 15px;
    height: 15px;
    background: #fff;
    display: block;
    border-radius: 100%;
    margin-top: -2px;
    border: 1px solid;
}
label.user-registration-form__label input:checked:before, li.ur-radio-list input:checked:before {
    background: #000;
}
/* Cuenta personalizada - Contraseña */
#user-registration .user-registration-MyAccount-content h2, #user-registration .user-registration-MyAccount-content .edit-password legend {
    display: none;
}
#user-registration fieldset {
    padding: 0;
    border: 0;
}