Estilizar el campo desplegable

¿Quiere dar a sus campos desplegables WPForms un aspecto personalizado? Mientras que los navegadores aplican su propio estilo predeterminado a los campos desplegables, puede utilizar CSS para crear una apariencia única que coincida con el diseño de su sitio.

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

Configuración del formulario

Comience por crear un formulario con un campo desplegable. Para este ejemplo, crearemos un sencillo formulario de contacto con:

• Campo Nombre
• Campo Email
• Campo desplegable (para "¿Cómo nos conoció?")
• Campo de párrafo (para comentarios)

Si necesita ayuda para crear su formulario, consulte nuestra guía sobre la creación de su primer formulario.

Estilizar el fondo y el texto

A continuación te explicamos cómo personalizar el aspecto básico de tu campo desplegable. Recuerde sustituir 1000 con su ID de 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

Puede sustituir la flecha desplegable predeterminada por 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 Font Awesome

Para un aspecto más moderno, puedes utilizar 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 diseñar campos desplegables:

• Los elementos de selección (desplegables) no pueden utilizar directamente pseudoelementos como ::before y ::after
• Debe seleccionar IDs específicos de formularios y campos para el estilo personalizado.
• El soporte de los navegadores varía para ciertas propiedades CSS
• Los identificadores de campo se encuentran en el panel de opciones de campo del formulario

Si necesita ayuda para encontrar los ID de sus formularios o campos, consulte nuestra guía para encontrar los ID de formularios y campos.

Y eso es todo lo que necesita para estilizar el campo Dropdown en WPForms. ¿Desea cambiar el estilo de los campos Checkbox y Multiple Choice? Eche un vistazo a nuestro tutorial sobre Cómo personalizar los campos Checkbox y Radio para que parezcan botones.