Introducción

Este artículo explica paso a paso cómo estilizar el buscador que suele ubicarse en el header de un tema WordPress: personalizar el placeholder, los bordes y el estilo en foco (focus). Cubre tanto temas clásicos (searchform.php) como bloques de búsqueda de Gutenberg, buenas prácticas de accesibilidad y snippets listos para copiar —los fragmentos de código están preparados para incluirse en tu tema o child theme.

Requisitos y notas previas

• Acceso a los archivos del tema (preferiblemente a través de un child theme).
• Conocimientos básicos de CSS y PHP para añadir o sobrescribir plantillas.
• Comprobar la clase/ID real del formulario de búsqueda en tu tema: .search-form, .header-search, .site-search, .search-field, etc. Ajusta los selectores del CSS según corresponda.

1. Localizar y, si es necesario, sobrescribir el formulario de búsqueda

En temas clásicos, el formulario se crea normalmente en searchform.php o con get_search_form(). Si no existe searchform.php en tu child theme, crea uno y WordPress usará tu versión en lugar de la del tema padre.

Ejemplo mínimo de searchform.php (uso de clases estándar para facilitar estilo):

lt?php
// searchform.php - ejemplo simple y accesible
?>

  ltlabel class=screen-reader-text for=sgtBuscar:lt/labelgt
  ltinput type=search id=s class=search-field placeholder=Buscar en el sitio... value=lt?php echo get_search_query() ?gt name=s /gt
  ltbutton type=submit class=search-submitgtBuscarlt/buttongt
lt/formgt

2. CSS básico: apariencia del input y del placeholder

Aplica estas reglas base para controlar bordes, background, borde redondeado, padding y el placeholder con prefijos para compatibilidad.

/ Selector genérico: ajusta .header-search o .search-form según tu tema /
.header-search .search-field,
.search-form .search-field {
  display: inline-block
  width: 100%
  max-width: 320px
  padding: 10px 14px
  font-size: 16px
  border: 1px solid #d0d0d0      / borde por defecto /
  border-radius: 6px
  background-color: #fff
  color: #222
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 120ms ease
  -webkit-appearance: none       / quitar estilos predeterminados en iOS/Safari /
  appearance: none
  outline: none
}

/ Placeholder: estándar   prefijos para compatibilidad /
.header-search .search-field::placeholder { color: #9aa0a6 opacity: 1 }
.header-search .search-field::-webkit-input-placeholder { color: #9aa0a6 }
.header-search .search-field:-ms-input-placeholder { color: #9aa0a6 }
.header-search .search-field::-ms-input-placeholder { color: #9aa0a6 }

/ Opcional: placeholder más ligero /
.header-search .search-field::placeholder {
  font-style: italic
  letter-spacing: 0.2px
}

3. Estilo para el estado :focus (enfoque)

El foco debe ser visible y accesible. Usa outline o box-shadow para mantener alto contraste. Evita eliminar por completo el outline sin proveer una alternativa clara.

/ Estilo visible en foco: borde más marcado y sombra sutil /
.header-search .search-field:focus,
.search-form .search-field:focus {
  border-color: #2b8af6                  / color primario para foco /
  box-shadow: 0 0 0 3px rgba(43,138,246,0.12)
}

/ Mejor optar por focus-visible para usuarios de teclado (reduce falsos positivos con mouse) /
.header-search .search-field:focus:not(:focus-visible) {
  box-shadow: none
}

4. Quitar o personalizar el icono de cancel/clear en inputs type=search

Algunos navegadores muestran un botón de borrar por defecto (webkit). Puedes ocultarlo o customizar su apariencia:

/ Ocultar la X de WebKit si prefieres un botón propio /
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none
  height: 0
  width: 0
  appearance: none
  margin: 0
  padding: 0
}

/ Si quieres mantenerlo pero cambiar color/visibilidad, se requieren pseudo-elementos personalizados con overlay /

5. Botón de envío (search-submit) dentro del header

Diseña un botón coherente con el input o usa un icono SVG. Si usas un icono, mantén texto accesible (oculto visualmente) para lectores de pantalla.

.header-search .search-submit {
  border: none
  background-color: #2b8af6
  color: #fff
  padding: 10px 12px
  border-radius: 6px
  margin-left: 8px
  cursor: pointer
  font-weight: 600
  transition: background-color 160ms ease, transform 120ms ease
}

.header-search .search-submit:hover { background-color: #1f6fd1 }
.header-search .search-submit:active { transform: translateY(1px) }

6. Responsive: adaptar el buscador en pantallas pequeñas

En móviles suele convenir ocultar el input y mostrar un icono que despliegue el campo al tocar. Un enfoque simple con CSS y una clase .is-open:

/ Layout básico: icono visible en mobile, input oculto /
.header-search { display: flex align-items: center }
.header-search .search-field { display: block transition: max-width 200ms ease }

@media (max-width: 640px) {
  .header-search .search-field {
    max-width: 0
    padding-left: 0
    padding-right: 0
    border: 0
    visibility: hidden
    opacity: 0
  }
  .header-search.is-open .search-field {
    max-width: 240px
    visibility: visible
    opacity: 1
    padding: 8px 12px
    border: 1px solid #d0d0d0
  }
}

7. Insertar y cargar estilos correctamente en WordPress

Evita editar archivos del tema padre. Añade CSS al child theme o encola un CSS adicional desde functions.php para mantener integridad y compatibilidad con actualizaciones.

// functions.php del child theme: encolar hoja de estilos personalizada
function mi_tema_child_enqueue_styles() {
  wp_enqueue_style( mi-buscador-style, get_stylesheet_directory_uri() . /css/buscador-header.css, array(), 1.0.0 )
}
add_action( wp_enqueue_scripts, mi_tema_child_enqueue_styles )

8. Estilos para el bloque Search (Gutenberg / Site Editor)

Si usas el bloque Search de Gutenberg, inspecciona las clases que genera (por ejemplo .wp-block-search, .wp-block-search__button, .wp-block-search__input). Aplica reglas similares apuntando a esas clases.

/ Ejemplo para el bloque Search /
.wp-block-search .wp-block-search__input {
  border-radius: 8px
  border: 1px solid #e0e0e0
  padding: 10px 12px
}

.wp-block-search .wp-block-search__input:focus {
  border-color: #2b8af6
  box-shadow: 0 0 0 3px rgba(43,138,246,0.12)
}

9. Mejores prácticas de accesibilidad y usabilidad

• Label visible o screen-reader-text: siempre usa un ltlabelgt con for asociando al input o un aria-label si no hay label visual.
• Contraste: asegúrate que placeholder y texto tienen suficiente contraste cuando sea relevante. El placeholder no debe sustituir a la etiqueta.
• Focus claro: nunca elimines el indicador de foco sin proveer una alternativa visible.
• Prefers-reduced-motion: respeta la preferencia del usuario para reducir animaciones.

/ Respetar reduced motion /
@media (prefers-reduced-motion: reduce) {
  .header-search .search-field,
  .header-search .search-submit {
    transition: none
  }
}

10. Ejemplo avanzado: placeholder animado que se convierte en etiqueta

Si quieres animar el placeholder para que se convierta en una etiqueta al hacer foco, una opción es usar una etiqueta ltlabelgt y moverla con transform/opacity. A continuación un ejemplo simplificado (requiere JS para alternar clase en dispositivos táctiles o para accesibilidad):

  ltdiv class=search-wrapgt
    ltinput id=search-animated class=search-field name=s type=searchgt
    ltlabel for=search-animated class=animated-labelgtBuscar...lt/labelgt
  lt/divgt
lt/formgt

/ CSS para animar label (simplificado) /
.animated-search { position: relative }
.animated-search .search-field { padding: 14px 12px }
.animated-search .animated-label {
  position: absolute
  left: 12px
  top: 50%
  transform: translateY(-50%)
  color: #9aa0a6
  pointer-events: none
  transition: transform 180ms ease, font-size 180ms ease, top 180ms ease
}
.animated-search .search-field:focus   .animated-label,
.animated-search .search-field:not(:placeholder-shown)   .animated-label {
  top: 6px
  transform: none
  font-size: 12px
  color: #2b8af6
}

// JavaScript mínimo para añadir clase :placeholder-shown en navegadores que no lo soporten
(function(){
  var input = document.getElementById(search-animated)
  if(!(placeholder in document.createElement(input))) return
  function toggleNotEmpty(){
    if(input.value.trim() !== ) input.classList.add(not-empty)
    else input.classList.remove(not-empty)
  }
  input.addEventListener(input, toggleNotEmpty)
  toggleNotEmpty()
})()

11. Pruebas y compatibilidad

• Probar en Chrome, Firefox, Safari (iOS y macOS) y Edge, comprobando placeholder y clear button.
• Probar navegación por teclado: Tab para foco, comprobar lector de pantalla y que el label se anuncie.
• Verificar versión móvil: touch targets, iconos y comportamiento show/hide en menús compactos.

Resumen práctico

1. Localiza o crea searchform.php en tu child theme para controlar la estructura HTML.
2. Aplica CSS modular (clases específicas del header) para controlar placeholder, bordes y foco.
3. Usa pseudo-elementos ::placeholder con prefijos para compatibilidad antigua.
4. Establece un foco claro y accesible (outline o box-shadow), respeta prefers-reduced-motion.
5. Encola los estilos desde functions.php y prueba en navegadores y lectores de pantalla.

Con estos pasos tendrás un buscador en el header visualmente coherente, accesible y adaptable a móviles. Ajusta colores, radios y tamaños para integrarlo con el diseño de tu sitio.