Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] como eliminar flechas por defecto de los selects o lista/menu

Estas en el tema de como eliminar flechas por defecto de los selects o lista/menu en el foro de CSS en Foros del Web. Hola a todos! pues eso.... estoy intentando personalizar un desplegable lista/menu o select o como lo queráis llamar pero no consigo eliminar el icono de ...
  #1 (permalink)  
Antiguo 09/08/2015, 07:23
 
Fecha de Ingreso: marzo-2011
Mensajes: 105
Antigüedad: 13 años, 8 meses
Puntos: 3
como eliminar flechas por defecto de los selects o lista/menu

Hola a todos!
pues eso.... estoy intentando personalizar un desplegable lista/menu o select o como lo queráis llamar pero no consigo eliminar el icono de las flechitas que ponen por defecto los exploradores,

aquí dejo una imagen que he hecho para explicar con claridad mi problema:



me gustaria saber como puedo aplicar estilos css a ese botón que se queda encima para poder sustituir esa imagen por defecto por mi icono.


Gracias de antemano!

dejo el codigo css que tengo aplicado a la lista/menu por si acaso:

.listamenu{
height: 30px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12pt;
font-style: normal;
font-weight: bold;
color: #333;
text-decoration: none;

border:none;
border-bottom:0px solid #000;
margin-left:20px;

background: #FFF url(../fotos/iconolistamenu.png) no-repeat scroll right 2px;
background-color: #FFF;
background-image: url(../fotos/iconolistamenu.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right 2px;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}

Última edición por tonieet; 09/08/2015 a las 07:29
  #2 (permalink)  
Antiguo 09/08/2015, 07:30
Avatar de lauser
Moderator Unix/Linux
 
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 11 años, 4 meses
Puntos: 401
Respuesta: como eliminar flechas por defecto de los selects o lista/menu

No entiendo muy bien tu consulta.
A que te refieres a cambiar la imagen iconolistamenu.png?
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-
  #3 (permalink)  
Antiguo 09/08/2015, 07:38
 
Fecha de Ingreso: marzo-2011
Mensajes: 105
Antigüedad: 13 años, 8 meses
Puntos: 3
Respuesta: como eliminar flechas por defecto de los selects o lista/menu

hola lauser! lo que quiero es quitar ese icono tan feo que ponen por defecto los exploradores...
he puesto esa imagen de fondo pero claro... no tiene nada que ver con el boton...

me gustaría poder darle estilo al botón para poder ponerle el icono que se ve de fondo, pero no se como
  #4 (permalink)  
Antiguo 09/08/2015, 09:51
 
Fecha de Ingreso: marzo-2011
Mensajes: 105
Antigüedad: 13 años, 8 meses
Puntos: 3
Respuesta: como eliminar flechas por defecto de los selects o lista/menu

en serio nadie sabe como personalizar el maldito botón????
  #5 (permalink)  
Antiguo 09/08/2015, 12:48
 
Fecha de Ingreso: marzo-2015
Ubicación: Buenos Aires
Mensajes: 32
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: como eliminar flechas por defecto de los selects o lista/menu

Me parece que esa flecha es predeterminada para los select de cada explorador, para poder cambiarla deberias hacer un select personalizado, que sea tipo menu desplegable, y que no tenga la etiqueta select para que los navegadores se guien por el codigo css que utilices y no por el select, saludos.
  #6 (permalink)  
Antiguo 09/08/2015, 14:31
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 11 meses
Puntos: 208
Respuesta: como eliminar flechas por defecto de los selects o lista/menu

Con appearance:none; "borras" la flecha que trae por defecto el select.. después le agregas la que quieras con background-image y listo..

http://codepen.io/fede5426/pen/xGBdmP

Saludos

PD: Para que tenga un efecto hover, solamente le aplicas el :hover al select y le cambias el background-image.. lo agregue al codepen para que se vea.

Última edición por fede5426; 09/08/2015 a las 14:36
  #7 (permalink)  
Antiguo 09/08/2015, 15:00
 
Fecha de Ingreso: marzo-2011
Mensajes: 105
Antigüedad: 13 años, 8 meses
Puntos: 3
Respuesta: como eliminar flechas por defecto de los selects o lista/menu

Cita:
Iniciado por fede5426 Ver Mensaje
Con appearance:none; "borras" la flecha que trae por defecto el select.. después le agregas la que quieras con background-image y listo..

http://codepen.io/fede5426/pen/xGBdmP

Saludos

PD: Para que tenga un efecto hover, solamente le aplicas el :hover al select y le cambias el background-image.. lo agregue al codepen para que se vea.


Siiiii! por fiiin! jejeje muchas gracias fede5426! te doy un me gusta por que no te puedo dar 100!

esto era exactamente lo que buscaba! nadie sabia decirme como quitar el botón! vaya pesadilla!

Muchas gracias!

Última edición por tonieet; 09/08/2015 a las 17:25

Etiquetas: background, color, defecto, flechas, selects, todo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:13.