Personalizar el estilo de los campos individuales del formulario

Actualizado:
Ver Markdown

¿Te gustaría dar estilo a campos específicos en tus formularios, sin afectar a otros campos? Con el selector CSS adecuado, puedes cambiar los estilos de cualquier componente del formulario para que se ajuste a tus necesidades.

En este tutorial, proporcionaremos una lista de casi todos los selectores que podrías necesitar para dar estilo a campos individuales en tus formularios.

Nota: Este tutorial es un poco más avanzado y requiere algunos conocimientos de CSS. Si prefieres no usar código, puedes ver nuestra guía sobre cómo dar estilo a WPForms en el editor de bloques.

Cómo usar el código a continuación

A continuación, se muestra una lista de los selectores CSS que necesitarás para apuntar a campos de formulario individuales con tu código CSS.

Incluido a continuación, también encontrarás los estilos predeterminados que WPForms aplica automáticamente a esos selectores. Para personalizar cualquier parte de tu formulario, puedes comenzar copiando un fragmento de CSS de este tutorial en tu sitio, y luego editarlo según sea necesario.

Nota: ¿No estás seguro de cómo añadir CSS a tu sitio? Consulta el tutorial de WPBeginner sobre cómo añadir CSS personalizado a tu sitio de WordPress.

Selectores y estilos predeterminados de WPForms

Algunos de los estilos que ves en tu formulario (como la fuente) provendrán de tu tema. WPForms también incluye algunos estilos básicos para ayudar a que tus formularios se vean geniales en cualquier tema. Sin embargo, sin importar de dónde provenga el estilo inicial, generalmente se puede anular utilizando selectores CSS muy específicos.

Nota: Al añadir CSS a tu sitio, puede ser necesario incluir !important antes del punto y coma para asegurarte de que tus estilos personalizados se apliquen correctamente. Esto ayudará a anular cualquier CSS añadido por tu tema u otros plugins. Consulta nuestra guía para solucionar problemas de CSS para más detalles.

A continuación, se muestra una lista de selectores CSS que son específicos para cada parte de un formulario, así como los estilos que se incluirán por defecto a través de WPForms.

Título y descripción del formulario

.wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

Descripción del formulario

.wpforms-form .wpforms-description {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0 0;
}

Indicador de progreso de varias páginas

Nota: Para cambiar el color de relleno verde del indicador de progreso, utiliza las opciones de varias páginas en el constructor de formularios.

Título de página del indicador de progreso

span.wpforms-page-indicator-page-title {
    font-size: 18px;
}

Pasos del indicador de progreso

span.wpforms-page-indicator-steps {
    font-size: 18px;
}

Paso actual del indicador de progreso

span.wpforms-page-indicator-steps-current {
    font-size: 18px;
}

Barra de progreso del indicador de progreso

Barra de progreso

.wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress-wrap {
    display: block;
    width: 100%;
    background-color: #ddd;
    height: 18px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin: 5px 0 0;
}

Barra de progreso del indicador de progreso (solo relleno)

.wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress {
    height: 18px;
    position: absolute;
    left: 0;
    top: 0;
}

Indicador de progreso: Círculos

Círculos indicadores de progreso

Círculos de paso (los colores se aplican solo a los no activos)

.wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page-number {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 10px 0 0;
    line-height: 40px;
    text-align: center;
    background-color: #ddd;
    color: #666;
}

Círculo del paso actual

.wpforms-form .wpforms-page-indicator.circles .active .wpforms-page-indicator-page-number {
    color: #fff;
}

Conector del indicador de progreso

Conector del indicador de progreso

Secciones de pasos

.wpforms-form .wpforms-page-indicator.connector .wpforms-page-indicator-page {
    float: left;
    text-align: center;
    font-style: 16px;
    line-height: 1.2;
}

Selectores globales de campos de formulario

Todas las etiquetas de campo

.wpforms-form .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Todos los sub-títulos de campo

.wpforms-form .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}

Todas las descripciones de campo

.wpforms-form .wpforms-field-description {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0 0;
}

Cajas alrededor de todos los campos de entrada

.wpforms-container input[type=date], .wpforms-container input[type=datetime], .wpforms-container input[type=datetime-local], .wpforms-container input[type=email], .wpforms-container input[type=month], .wpforms-container input[type=number], .wpforms-container input[type=password], .wpforms-container input[type=range], .wpforms-container input[type=search], .wpforms-container input[type=tel], .wpforms-container input[type=text], .wpforms-container input[type=time], .wpforms-container input[type=url], .wpforms-container input[type=week], .wpforms-container select, .wpforms-container textarea {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Relleno entre todos los campos

.wpforms-form .wpforms-field {
    padding: 10px 0;
    clear: both;
}

Todos los campos de entrada pequeños

.wpforms-container input.wpforms-field-small, .wpforms-container select.wpforms-field-small, .wpforms-container .wpforms-field-row.wpforms-field-small { 
   max-width: 25%;
}

Todos los campos de entrada medianos

.wpforms-container input.wpforms-field-medium, .wpforms-container select.wpforms-field-medium, .wpforms-container .wpforms-field-row.wpforms-field-medium {
   max-width: 60%;
}

Todos los campos de entrada grandes

.wpforms-container input.wpforms-field-large, .wpforms-container select.wpforms-field-large, .wpforms-container .wpforms-field-row.wpforms-field-large { 
   max-width: 100%;
}

Mensaje de confirmación

Mensaje de confirmación

.wpforms-confirmation-container-full {
    color: #333;
    margin: 0 0 24px 0;
    background: #e0ffc7;
    border: 1px solid #b4d39b;
    padding: 15px 15px;
}

Campos obligatorios

Asterisco de ‘Requerido’

Asterisco de campo obligatorio

.wpforms-form .wpforms-required-label {
    color: #ff0000;
    font-weight: 400;
}

Errores de validación

Error de validación

Caja de campo
.wpforms-form .wpforms-field input.wpforms-error, .wpforms-form .wpforms-field textarea.wpforms-error, .wpforms-form .wpforms-field select.wpforms-error {
    border: 1px solid #cc0000;
}
Mensaje de validación
.wpforms-container em.wpforms-error {
    display: block;
    color: #990000;
    font-size: 12px;
    float: none;
}
Icono de error de validación

Icono de error de validación

 .wpforms-container-full .wpforms-form em.wpforms-error:before {
    content: '';
    position: relative;
    display: inline-block;
    right: 5px;
    top: 1.5px;
    width: 16px;
    height: 14px;
    background-color: var(--wpforms-label-error-color);
}

Campos estándar

Texto de una sola línea

Campo de texto de una sola línea

Relleno de texto de una sola línea
.wpforms-form  .wpforms-field.wpforms-field-text {
    padding: 10px 0;
    clear: both;
}
Etiqueta de texto de una sola línea
.wpforms-form .wpforms-field.wpforms-field-text .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Caja de entrada de texto de una sola línea
.wpforms-form .wpforms-field.wpforms-field-text input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Texto de párrafo

Campo de texto de párrafo

Relleno de texto de párrafo
.wpforms-form .wpforms-field.wpforms-field-textarea {
    padding: 10px 0;
    clear: both;
}
Etiqueta de texto de párrafo
.wpforms-form .wpforms-field.wpforms-field-textarea .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Caja de entrada de texto de párrafo
.wpforms-form .wpforms-field.wpforms-field-textarea textarea {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 120px;
    width: 100%;
    line-height: 1.3;
}

Campo desplegable

.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic {
    padding: 10px 0;
    clear: both;
}
.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
.wpforms-form .wpforms-valid {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background-color: #ffffff;
    padding: 4px 6px 1px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    min-height: 35px;
    overflow: hidden;
}

Campo desplegable

.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-modern {
    padding: 10px 0;
    clear: both;
}
.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-modern .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
.wpforms-form .choices__inner {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background-color: #ffffff;
    padding: 4px 6px 1px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    min-height: 35px;
    overflow: hidden;
}

Opción múltiple

Campo de opción múltiple

Relleno de campo de opción múltiple
.wpforms-form .wpforms-field.wpforms-field-radio {
    padding: 10px 0;
    clear: both;
}
Etiqueta de opción múltiple
.wpforms-form .wpforms-field.wpforms-field-radio .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Etiquetas de opciones de opción múltiple
.wpforms-form .wpforms-field.wpforms-field-radio ul li .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

Casillas de verificación

Campo de casillas de verificación

Relleno de casillas de verificación
.wpforms-form .wpforms-field.wpforms-field-checkbox {
    padding: 10px 0;
    clear: both;
}
Etiqueta de casillas de verificación
.wpforms-form .wpforms-field.wpforms-field-checkbox .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Etiquetas de opciones de casilla de verificación
.wpforms-form .wpforms-field.wpforms-field-checkbox ul li .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

Números

Campo de números

Relleno de números
.wpforms-form .wpforms-field.wpforms-field-number {
    padding: 10px 0;
    clear: both;
}
Etiqueta de números
.wpforms-form .wpforms-field.wpforms-field-number .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Caja de entrada de números
.wpforms-form .wpforms-field.wpforms-field-number input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}

Nombre

Campo de nombre

Cuadro de entrada de nombre
.wpforms-form input[type=text].wpforms-field-name-first {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}
Cuadro de entrada de segundo nombre
.wpforms-form input[type=text].wpforms-field-name-middle {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}
Cuadro de entrada de apellido
.wpforms-form input[type=text].wpforms-field-name-last {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Correo electrónico

Campo de correo electrónico

Relleno de correo electrónico
.wpforms-form .wpforms-field.wpforms-field-email {
    padding: 10px 0;
    clear: both;
}
Etiqueta de correo electrónico
.wpforms-form .wpforms-field.wpforms-field-email .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Cuadro de entrada de correo electrónico (solo principal)
.wpforms-form input[type=email].wpforms-field-email-primary {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}
Cuadro de entrada de correo electrónico (solo confirmar correo electrónico)
.wpforms-form input[type=email].wpforms-field-email-confirmation {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}
Subetiquetas de correo electrónico
.wpforms-form .wpforms-field.wpforms-field-email .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}

Control deslizante de números

Campo de control deslizante numérico

Relleno de control deslizante numérico
.wpforms-form .wpforms-field.wpforms-field-number-slider {
    padding: 10px 0;
    clear: both;
}
Etiqueta de control deslizante numérico
.wpforms-form .wpforms-field.wpforms-field-number-slider .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Barra de control deslizante numérico
.wpforms-form .wpforms-field.wpforms-field-number-slider input[type=range] {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Acuerdo GDPR

Campo de acuerdo GDPR

Relleno de acuerdo GDPR
.wpforms-form .wpforms-field.wpforms-field-gdpr-checkbox {
    padding: 10px 0;
    clear: both;
}
Etiqueta de acuerdo GDPR
.wpforms-form .wpforms-field.wpforms-field-gdpr-checkbox .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

¡Eso es todo! Ahora puedes usar estos selectores para aplicar CSS personalizado a los campos estándar de tus formularios.

A continuación, ¿te gustaría dar estilo a otros campos en WPForms? Asegúrate de consultar nuestros tutoriales sobre cómo personalizar el estilo de campos avanzados y campos de pago.

Aún atascado? ¿Cómo podemos ayudar?
Última actualización el 04 de junio de 2024

El mejor plugin constructor de formularios de arrastrar y soltar para WordPress

Fácil, rápido y seguro. Únete a más de 6 millones de propietarios de sitios web que confían en WPForms.