Cómo cambiar el botón de limpiar en input type search

  • Autor Autor Juanjo87
  • Fecha de inicio Fecha de inicio
J

Juanjo87

Gamma
Diseñador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Muy buenas de nuevo compañeros, llevo toda la mañana buscando como puedo cambiar la X que aparece en los input html5 type search. Me explico, me refiero a la "x" que aparece en los campos de búsqueda para borrar lo que se a escrito. Viene en azul por defecto y estoy intentando cambiarla por una X de color blanco. Alguien me echa una manita??
 
vale para no abrir un nuevo tema en jquery pongo esto por aqui, si deberia de ir en jquery por favor muevanlo.

Con un poco de jquery he conseguido lo que deseo. no e podido cambiar el color de la x por lo tanto me e decidido a crear yo mi propio boton que borre el contenido del input de esta forma

PHP:
<script>
   $("#btnLimpiar").click(function(event) {
	   $("#searchform")[0].reset();
   });
</script>

ahora me interesa solo que aparezca cuando escribo dentro del input, asi que con un poco de css lo escondo y le doy algo de forma:

HTML:
#btnLimpiar{display: none;color: white; width: 20px; height: 20px; background: red; border-radius: 50%; cursor:pointer;}

y con jquery ago que aparezca cuando escribimos dentro del input y desaparezca cuando presiono el mismo boton, quedando algo asi:
PHP:
<script>
   $("#s").keypress(function(event) {
	   $('#btnLimpiar').show(0);
   });
   $("#btnLimpiar").click(function(event) {
	   $('#btnLimpiar').hide(0);
   });
   
   
   
</script>

Lo unico que me falta es que tmb desaparezca cuando detecte de que el input este vacio y aqui ya es donde me pierdo. Alguien mas experimentado puede ayudarme con esto? Gracias, auque sea por leerme jaja:rofl::rofl:

- - - Actualizado - - -

vale, mientras escribía me habéis contestado, miro lo que me habéis pasado. Graciass

- - - Actualizado - - -

vale creo q no me entendisteis aunque los aportes no era lo que andaba buscando tmb son de utilidad, gracias.
me refiero a esta x

https://knackforge.com/sites/default/files/selection_032.png

- - - Actualizado - - -

Solucionado asi

PHP:
 $(document).ready(function() {
	 
	 
   $('#s').keyup(function(){
	   
    if($("#s").val().length < 1) {
    $('#btnLimpiar').hide(0);
    
}
 
   
   });
   
   
  $("#s").keypress(function(event) {
	   $('#btnLimpiar').show(0);
   });
   $("#btnLimpiar").click(function(event) {
	   $('#btnLimpiar').hide(0);
   }); 
   
});

utilizando keyup parece que funciona bien, lo unico que me e dado cuenta de que si elimino el texto con el raton, obviamente se sigue mostrando la x y no desaparece. Alguien sabe como puedo hacerlo?
 
vale para no abrir un nuevo tema en jquery pongo esto por aqui, si deberia de ir en jquery por favor muevanlo.

Con un poco de jquery he conseguido lo que deseo. no e podido cambiar el color de la x por lo tanto me e decidido a crear yo mi propio boton que borre el contenido del input de esta forma

PHP:
<script>
   $("#btnLimpiar").click(function(event) {
	   $("#searchform")[0].reset();
   });
</script>

ahora me interesa solo que aparezca cuando escribo dentro del input, asi que con un poco de css lo escondo y le doy algo de forma:

HTML:
#btnLimpiar{display: none;color: white; width: 20px; height: 20px; background: red; border-radius: 50%; cursor:pointer;}

y con jquery ago que aparezca cuando escribimos dentro del input y desaparezca cuando presiono el mismo boton, quedando algo asi:
PHP:
<script>
   $("#s").keypress(function(event) {
	   $('#btnLimpiar').show(0);
   });
   $("#btnLimpiar").click(function(event) {
	   $('#btnLimpiar').hide(0);
   });
   
   
   
</script>

Lo unico que me falta es que tmb desaparezca cuando detecte de que el input este vacio y aqui ya es donde me pierdo. Alguien mas experimentado puede ayudarme con esto? Gracias, auque sea por leerme jaja:rofl::rofl:

- - - Actualizado - - -

vale, mientras escribía me habéis contestado, miro lo que me habéis pasado. Graciass

- - - Actualizado - - -

vale creo q no me entendisteis aunque los aportes no era lo que andaba buscando tmb son de utilidad, gracias.
me refiero a esta x

https://knackforge.com/sites/default/files/selection_032.png

- - - Actualizado - - -

Solucionado asi

PHP:
 $(document).ready(function() {
	 
	 
   $('#s').keyup(function(){
	   
    if($("#s").val().length < 1) {
    $('#btnLimpiar').hide(0);
    
}
 
   
   });
   
   
  $("#s").keypress(function(event) {
	   $('#btnLimpiar').show(0);
   });
   $("#btnLimpiar").click(function(event) {
	   $('#btnLimpiar').hide(0);
   }); 
   
});

utilizando keyup parece que funciona bien, lo unico que me e dado cuenta de que si elimino el texto con el raton, obviamente se sigue mostrando la x y no desaparece. Alguien sabe como puedo hacerlo?


Detectando los eventos del raton puedes hacerlo.
How To Detect Right Mouse Click + Delete Using Jquery/Javascript - Stack Overflow

saludos.
 

Temas similares

U
Respuestas
4
Visitas
1K
Usuario eliminado 174876
U
Atrás
Arriba