Como alterar o botão de limpar no input type search

  • Autor Autor Juanjo87
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
J

Juanjo87

Gamma
Diseñador
Usuário com poucas negociações! Use sempre o saldo do 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??
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
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.
 

Tópicos similares

U
Respostas
4
Visitas
1K
Usuario eliminado 174876
U
Voltar
Topo