ya no muestra el botón cancelar (x) en iOS

5 minutos de lectura
<input type="search">

Todos los artículos en línea indican que y input con type=search tendrá un botón claro en el lado derecho de la entrada (en los productos de Apple).

Esto todavía funciona en Safari en MacOS, pero en Safari móvil (iOS9) ya no funciona.

¿Hay alguna manera de recuperar este botón de cancelación de búsqueda?

Ya probé esto:

input::-webkit-search-cancel-button{-webkit-appearance:searchfield-cancel-button;}

También intenté darle a la entrada un name y value. Poniéndolo también dentro de un formpero fue en vano.

Encontre un página que agregó el botón usando csspero en mi iPhone, al presionar el botón, la carreta se colocará dentro del botón, lo cual es súper extraño e inutilizable.

avatar de usuario
mayur patki

Pude hacerlo funcionar en el iPhone usando el CSS a continuación

input[type="search"]::-webkit-search-cancel-button {

  /* Remove default */
  -webkit-appearance: none;

  /* Now your own custom styles */
   height: 14px;
   width: 14px;
   display: block;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
  /* setup all the background tweaks for our custom icon */
  background-repeat: no-repeat;

  /* icon size */
  background-size: 14px;

}
<input type="search" value="Example">

  • Bueno, muestra un botón personalizado, pero sigue siendo ineficaz para mí. ¿Encontró una manera de borrar el contenido del campo con este botón?

    – 96 khz

    10 de abril de 2019 a las 14:08

  • ¿Agregó para el componente de entrada con el que está tratando de obtener el botón?

    – mayur patki

    4 mayo 2019 a las 13:20

  • Esto funciona en iOS 14 en el momento de este comentario, incluido el borrado de UX para el elemento. input[type="search"]. Por alguna razón, el equipo de Apple que proporcionó este activo no lo hizo, por lo que el control está ahí y es visible como un pequeño punto si le das un borde sin imagen ni tamaño, por lo que colapsa. Si alguien quiere respaldar el software de Apple, no dude en decírselo, aunque no creo que lo arreglen.

    – Jimmont

    21 de octubre de 2020 a las 9:11

avatar de usuario
AteoP3ace

Así que permítanme comenzar con cómo llegué a donde estoy. Primero cargué una entrada como type="search" en OS X e iOS 9. Vi que funcionó en OS X pero no en iOS. Entonces comencé a investigar. Cuando miré en accesibilidad sin texto en la entrada, solo tenía un elemento secundario. Cuando escribí el texto, de repente tenía dos.

ya no muestra el botón cancelar (x) en iOS

Ver en la esquina inferior bajo accesibilidad. cuando me cierro sobre div:role(button) resalta la pequeña X clara como puede ver arriba. Entonces probé lo mismo en iOS y, de hecho, hace lo mismo solo cuando pasa el mouse sobre el mismo elemento, no resalta nada. Por lo tanto, Safari lo está agregando en iOS.

Luego comencé a jugar con algo de CSS. Mi primer pensamiento fue si no se muestra, tal vez solo sea un problema de visualización, por lo que agregué esto.

::-webkit-search-cancel-button {
    height: 10px;
    width: 10px;
    display: inline-block;
    background: blue;
}

Que ahora me consiguió esto en iOS:

ya no muestra el botón cancelar (x) en iOS

Entonces está allí, pero por alguna razón en iOS está oculto y no recibe ningún contenido. Además, al hacer clic en él, tampoco se borra el campo de búsqueda una vez que obligas a que sea visible. Todavía estoy jugando con él, pero en este momento parece que lo rompieron. Intencionalmente o no, no estoy seguro. Por el momento, una solución de CSS y JavaScript puede llevarlo de vuelta a donde quiere estar más rápido. Actualizaré la respuesta si encuentro algo más.

EDITAR

Esto me está volviendo loco. Busqué en toda su documentación de desarrollador para safari e iOS.

https://developer.apple.com/library/prerelease/ios/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/(null)-SW1

Todavía lo mencionan como compatible en el enlace anterior, pero esos documentos no se han actualizado desde 2012 si observa el historial de revisión y no puedo encontrar ninguno más nuevo. Blarg. He intentado todas las combinaciones que puedo pero simplemente no funciona. Creo que es seguro asumir, ya que no debería ser tan difícil hacer que funcione, que lo rompieron o lo quitaron y no sienten que sea lo suficientemente importante como para mencionarlo. Su documentación dice usar algo como este CSS:

input {
    -webkit-appearance: searchfield;
}

*::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

En este punto, como dije, haga el suyo o tal vez incluso presente un informe de error y tal vez podamos averiguarlo con seguridad.

Informes de errores enviados a Apple:

  • AtheistP3ace envió un informe de error a Apple, número de error 24932348.
  • Splaktar habló con los desarrolladores de Apple y respondieron y dijeron que parece haber una regresión desde iOS 9. Número de identificación 35131989, que finalmente se cerró por inactividad y luego se marcó como un duplicado del informe de error de AtheistP3ace.

  • ¡Gracias! Sí, es realmente extraño que no haya absolutamente ninguna mención de Apple en ninguna parte que pueda encontrar para eliminar esto. Todavía estoy jugando con diferentes configuraciones para ver si puedo hacer que funcione. Actualizaré la pregunta si encuentro algo más.

    – AtheistP3ace

    1 de marzo de 2016 a las 14:46

  • También envié un informe de error a Apple. Vamos a ver lo que dicen.

    – AtheistP3ace

    2 de marzo de 2016 a las 17:44

  • Gracias por la investigación. Sin embargo, todavía quiero el botón de cancelar para los usuarios de Chrome; probablemente tenga que usar algo de Javascript.

    –Kevin Lee

    29 de julio de 2016 a las 6:19

  • @Splaktar El número de error es: 24932348

    – AtheistP3ace

    23/10/2017 a las 20:14

  • @Splaktar no, no ha habido ningún movimiento en el mío desde el primer día. Me alegra saber que has progresado!! Si tiene tiempo y cuidado para compartir, actualice con algo nuevo. Siempre estoy interesado en escuchar.

    – AtheistP3ace

    7 de enero de 2019 a las 22:58


avatar de usuario
Tuc3k

No creo que sea posible con solo <input type="search"> en iOS 9, necesitarás “hackear”.

aquí está en vivo JSFDDLE ejemplo.

  • ¿Tiene algún ejemplo para lo mismo en el código de reactjs?

    – Kiran

    13 de marzo de 2017 a las 22:24

¿Ha sido útil esta solución?