Estilo del campo desplegable

¿Quieres dar a tus campos desplegables de WPForms un aspecto personalizado? Si bien los navegadores aplican su propio estilo predeterminado a los campos desplegables, puedes usar CSS para crear una apariencia única que coincida con el diseño de tu sitio.

Esta guía te mostrará cómo personalizar colores, bordes, flechas y más para tus campos desplegables.

Configuración de tu formulario

Comienza creando un formulario con un campo desplegable. Para este ejemplo, crearemos un formulario de contacto simple con:

• Campo de nombre
• Campo de correo electrónico
• Campo desplegable (para "¿Cómo nos conoció?")
• Campo de párrafo (para comentarios)

Si necesitas ayuda para crear tu formulario, consulta nuestra guía sobre cómo crear tu primer formulario.

Estilo del fondo y del texto

Así es como puedes personalizar la apariencia básica de tu campo desplegable. Recuerda reemplazar 1000 con el ID de tu formulario:

Si necesitas ayuda sobre cómo y dónde añadir CSS personalizado, consulta este tutorial sobre cómo añadir estilos CSS personalizados.

/* Basic dropdown styling */
form#wpforms-form-1000 select {
    background-color: #b95d52;
    color: #fff;
    border: 1px solid #b95d52;
    border-radius: 5px;
    padding: 10px;
}

/* Hover and focus states */
form#wpforms-form-1000 select:hover,
form#wpforms-form-1000 select:focus {
    background-color: #fff;
    color: #b95d52;
    box-shadow: none;
}

Personalización de la flecha desplegable

Puedes reemplazar la flecha desplegable predeterminada con una imagen personalizada:

/* Remove default arrow */
form#wpforms-form-1000 select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 30px;
    
    /* Add custom arrow image */
    background-image: url('your-arrow-image.png');
    background-repeat: no-repeat;
    background-position: right .7em center;
    background-size: 25px 25px;
}

/* Hide default arrow in IE */
form#wpforms-form-1000 select::-ms-expand {
    display: none;
}

Añadir iconos de Font Awesome

Para un aspecto más moderno, puedes usar iconos de Font Awesome como flecha desplegable. Primero, instala el plugin Font Awesome si aún no lo has hecho.

/* Hide default arrow and prepare for Font Awesome */
#wpforms-form-1000-field_24-container select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
    padding-right: 30px;
}

/* Add Font Awesome arrow */
#wpforms-form-1000-field_24-container::after {
    font-family: fontawesome;
    content: "\f149";  /* Font Awesome down arrow code */
    position: absolute;
    top: 53%;
    left: 95%;
    pointer-events: none;
}

Al estilizar campos desplegables:

• Los elementos select (desplegables) no pueden usar directamente pseudo-elementos como ::before y ::after
• Debes apuntar a IDs de formulario y campo específicos para el estilo personalizado
• La compatibilidad del navegador varía para ciertas propiedades CSS
• Los IDs de campo se encuentran en el panel Opciones de campo de tu formulario

Si necesitas ayuda para encontrar los IDs de tu formulario o campo, consulta nuestra guía sobre cómo encontrar IDs de formulario y campo.

Y eso es todo lo que necesitas para estilizar el campo Desplegable en WPForms. A continuación, ¿te gustaría también cambiar el estilo de los campos Checkbox y Multiple Choice? Consulta nuestro tutorial sobre Cómo personalizar campos de casilla de verificación y radio para que parezcan botones.