html - mac - Cómo eliminar la flecha de un elemento seleccionado en Firefox
inspeccionar elemento firefox teclado (30)
Estoy intentando diseñar un elemento select usando CSS3. Estoy obteniendo los resultados que deseo en WebKit (Chrome / Safari), pero Firefox no está jugando bien (ni siquiera me molesto con IE). Estoy usando la propiedad de appearance CSS3, pero por alguna razón no puedo quitar el ícono desplegable de Firefox.
Aquí hay un ejemplo de lo que estoy haciendo: http://jsbin.com/aniyu4/2/edit
#dropdown {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: transparent url(''example.png'') no-repeat right center;
padding: 2px 30px 2px 2px;
border: none;
}
Como puedes ver, no estoy intentando nada elegante. Solo quiero eliminar los estilos predeterminados y agregar mi propia flecha desplegable. Como dije, genial en WebKit, no genial en Firefox. Aparentemente, -moz-appearance: none no elimina el elemento desplegable.
¿Algunas ideas? No, JavaScript no es una opción
Actualización importante:
¡A partir de Firefox V35 la propiedad apariencia ahora funciona!
Desde notas de la versión oficial de Firefox en V35 :
Usando
-moz-appearancecon el valornoneen un cuadro combinado ahora elimine el botón desplegable (error 649849).
Entonces, para ocultar la flecha predeterminada, es tan fácil como agregar las siguientes reglas en nuestro elemento seleccionado:
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select {
margin: 50px;
border: 1px solid #111;
background: transparent;
width: 150px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
¡Creo que encontré la solución compatible con FF31!
Aquí hay dos opciones que están bien explicadas en este enlace:
http://www.currelis.com/hiding-select-arrow-firefox-30.html
Usé la opción 1: Rodrigo-Ludgero publicó esta revisión en Github, incluida una demostración en línea. Probé esta demostración en Firefox 31.0 y parece estar funcionando correctamente. Probado en Chrome e IE también. Aquí está el código html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Select</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="custom-select fa-caret-down">
<select name="" id="">
<option value="">Custom Select</option>
<option value="">Custom Select</option>
<option value="">Custom Select</option>
</select>
</div>
</body>
</html>
y el css:
.custom-select {
background-color: #fff;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0 2em;
padding: 0;
position: relative;
width: 100%;
z-index: 1;
}
.custom-select:hover {
border-color: #999;
}
.custom-select:before {
color: #333;
display: block;
font-family: ''FontAwesome'';
font-size: 1em;
height: 100%;
line-height: 2.5em;
padding: 0 0.625em;
position: absolute;
top: 0;
right: 0;
text-align: center;
width: 1em;
z-index: -1;
}
.custom-select select {
background-color: transparent;
border: 0 none;
box-shadow: none;
color: #333;
display: block;
font-size: 100%;
line-height: normal;
margin: 0;
padding: .5em;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.custom-select select::-ms-expand {
display: none; /* to ie 10 */
}
.custom-select select:focus {
outline: none;
}
/* little trick for custom select elements in mozilla firefox 17/06/2014 @rodrigoludgero */
:-moz-any(.custom-select):before {
background-color: #fff; /* this is necessary for overcome the caret default browser */
pointer-events: none;
z-index: 1; /* this is necessary for overcome the pseudo element */
}
http://jsbin.com/pozomu/4/edit
¡Funciona muy bien para mí!
¿Aceptaría cambios menores en el html?
Algo así como poner una etiqueta div que contenga la etiqueta de selección.
Además de la respuesta de Joao Cunha , este problema ahora está en la lista de pendientes de Mozilla y está dirigido al verso 35.
Para aquellos que desean, aquí hay una solución de Todd Parker, mencionada en el blog de Cunha, que funciona hoy en día:
HTML:
<label class="wrapper">This label wraps the select
<div class="button custom-select ff-hack">
<select>
<option>Apples</option>
<option>Bananas</option>
<option>Grapes</option>
<option>Oranges</option>
<option>A very long option name to test wrapping</option>
</select>
</div>
</label>
CSS:
/* Label styles: style as needed */
label {
display:block;
margin-top:2em;
font-size: 0.9em;
color:#777;
}
/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {
position: relative;
display:block;
margin-top:0.5em;
padding:0;
}
/* These are the "theme" styles for our button applied via separate button class, style as you like */
.button {
border: 1px solid #bbb;
border-radius: .3em;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
background: #f3f3f3; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}
/* This is the native select, we''re making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {
width:100%;
margin:0;
background:none;
border: 1px solid transparent;
outline: none;
/* Prefixed box-sizing rules necessary for older browsers */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Remove select styling */
appearance: none;
-webkit-appearance: none;
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
font-size:16px;
/* General select styles: change as needed */
font-family: helvetica, sans-serif;
font-weight: bold;
color: #444;
padding: .6em 1.9em .5em .8em;
line-height:1.3;
}
/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don''t support background-size. In production, you''d handle this resolution switch via media query but this is a demo. */
.custom-select::after {
content: "";
position: absolute;
width: 9px;
height: 8px;
top: 50%;
right: 1em;
margin-top:-4px;
background-image: url(http://filamentgroup.com/files/select-arrow.png);
background-repeat: no-repeat;
background-size: 100%;
z-index: 2;
/* These hacks make the select behind the arrow clickable in some browsers */
pointer-events:none;
}
/* Hover style */
.custom-select:hover {
border:1px solid #888;
}
/* Focus style */
.custom-select select:focus {
outline:none;
box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
background-color:transparent;
color: #222;
border:1px solid #aaa;
}
/* Set options to normal weight */
.custom-select option {
font-weight:normal;
}
De acuerdo, sé que esta pregunta es antigua, pero 2 años más tarde y Mozilla no ha hecho nada.
He encontrado una solución simple.
Esto esencialmente elimina todo el formato del cuadro de selección en firefox y envuelve un elemento de tramo alrededor del cuadro de selección con su estilo personalizado, pero solo debe aplicarse a Firefox.
Diga que este es su menú de selección:
<select class=''css-select''>
<option value=''1''> First option </option>
<option value=''2''> Second option </option>
</select>
Y supongamos que la clase css ''css-select'' es:
.css-select {
background-image: url(''images/select_arrow.gif'');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
En Firefox, esto se mostraría con el menú de selección, seguido de la fea flecha de selección de Firefox, seguido de su agradable apariencia personalizada. No es ideal.
Ahora para poner esto en marcha en firefox, agrega un elemento span con la clase ''css-select-moz'':
<span class=''css-select-moz''>
<select class=''css-select''>
<option value=''1''> First option </option>
<option value=''2''> Second option </option>
</select>
</span>
A continuación, arregle el CSS para ocultar la flecha sucia de mozilla con la ventana -moz-appearance: y lance la flecha personalizada en la clase del tramo ''css-select-moz'', pero solo haga que se muestre en mozilla, así:
.css-select {
-moz-appearance:window;
background-image: url(''images/select_arrow.gif'');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
@-moz-document url-prefix() {
.css-select-moz{
background-image: url(''images/select_arrow.gif'');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
}
Bastante genial por solo tropezar con este error hace 3 horas (soy nuevo en el diseño web y completamente autodidacta). Sin embargo, esta comunidad me ha brindado mucha ayuda indirectamente, pensé que ya era hora de devolver algo.
Solo lo he probado en Firefox (mac) versión 18 y luego en 22 (después de actualizar).
Todos los comentarios son bienvenidos.
Desafortunadamente para ti esto es "algo sofisticado". Normalmente no es el lugar de los autores de la web para rediseñar elementos de formulario. Muchos navegadores deliberadamente no le permiten diseñarlos, para que el usuario vea los controles del sistema operativo a los que están acostumbrados.
La única manera de hacer esto consistentemente con los navegadores y sistemas operativos es usar JavaScript y reemplazar los elementos select por "DHTML".
El siguiente artículo muestra tres complementos basados en jQuery que te permiten hacer eso (es un poco viejo, pero no pude encontrar nada actual en este momento)
http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1
Desde Firefox 35, " -moz-appearance:none " que ya has escrito en tu código, finalmente elimina el botón de flecha como desees.
Fue un bugzilla.mozilla.org/show_bug.cgi?id=649849 resuelto desde esa versión.
El truco que funciona para mí es hacer un ancho de selección de más del 100% y aplicar desbordamiento: oculto
select {
overflow:hidden;
width: 120%;
}
Esta es la única forma en este momento para ocultar la flecha desplegable en FF.
Por cierto. si quieres hermosas listas desplegables, utiliza Chosen
Es un truco enorme, pero -moz-appearance: menulist-text podría hacer el truco.
Esto funciona (probado en Firefox 23.0.1):
select {
-moz-appearance: radio-container;
}
Estoy diseñando el seleccionado solo le gusta esto
<select style=" -moz-appearance: radio-container;
-webkit-appearance: none;
appearance: none;
">
Funciona para mí en FF, Safari y Chrome en todas las versiones que he probado.
En IE pongo:
select::-ms-expand {
display: none;
}
/*to remove in all selects*/
También puede: .yourclass :: - ms-expand {display: none; } .yourid :: - ms-exapan {display: ninguno; }
Hemos encontrado una manera simple y decente para hacer esto. Es un navegador cruzado, degradable y no rompe una publicación de formulario. Primero configure la opacity del cuadro de selección en 0 .
.select {
opacity : 0;
width: 200px;
height: 15px;
}
<select class=''select''>
<option value=''foo''>bar</option>
</select>
esto es para que aún pueda hacer clic en él
Luego haz div con las mismas dimensiones que el cuadro de selección. El div debería colocarse debajo del cuadro de selección como fondo. Usa { position: absolute } y z-index para lograr esto.
.div {
width: 200px;
height: 15px;
position: absolute;
z-index: 0;
}
<div class=''.div''>{the text of the the current selection updated by javascript}</div>
<select class=''select''>
<option value=''foo''>bar</option>
</select>
Actualiza el innerHTML del div con javascript. Easypeasy con jQuery:
$(''.select'').click(function(event)) {
$(''.div'').html($(''.select option:selected'').val());
}
¡Eso es! Solo dale estilo a tu div en lugar de a la casilla de selección. No he probado el código anterior, así que probablemente necesites ajustarlo. Pero espero que entiendas la esencia.
Creo que esta solución supera a {-webkit-appearance: none;} . Lo que los navegadores deberían hacer a lo sumo es dictar la interacción con los elementos del formulario, pero definitivamente no cómo se muestran inicialmente en la página, ya que eso rompe el diseño del sitio.
La propiedad de appearance de CSS3 no permite none valor. Eche un vistazo a la referencia W3C . Entonces, lo que estás tratando de hacer no es válido (de hecho, Chrome no debería aceptarlo también).
Entonces desafortunadamente, realmente no tenemos ninguna solución de navegador cruzado para ocultar esa flecha usando CSS puro. Como señaló, necesitarás JavaScript.
Le sugiero que considere usar el plugin SelectBox jQuery . Es muy liviano y está muy bien hecho.
La respuesta de Jordan Young es la mejor. Pero si no puede o no quiere cambiar su código HTML, puede considerar eliminar la flecha desplegable personalizada que se sirve en Chrome, Safari, etc. y dejar la flecha predeterminada de Firefox, pero sin generar doble flecha. No es ideal, pero es una buena solución rápida que no agrega ningún HTML y no compromete su apariencia personalizada en otros navegadores.
<select>
<option value=''1''> First option </option>
<option value=''2''> Second option </option>
</select>
CSS:
select {
background-image: url(''images/select_arrow.gif'');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
@-moz-document url-prefix() {
select {
background-image: none;
}
}
Muchas discusiones suceden aquí y allá, pero no veo una solución adecuada para este problema. Finalmente terminó escribiendo un pequeño código de Jquery + CSS para hacer este HACK en IE y Firefox.
Calcule el ancho del elemento (elemento SELECCIONAR) usando Jquery. Agregue una envoltura alrededor del elemento seleccionado y mantenga el desbordamiento oculto para este elemento. Asegúrese de que el ancho de este contenedor sea appox. 25px menos que el elemento SELECT. Esto podría hacerse fácilmente con Jquery. Así que ahora nuestro ícono se ha ido ...! y es hora de agregar nuestro ícono de imagen en el elemento SELECCIONAR ... !!! Solo agregue algunas líneas simples para agregar el fondo y ya está todo listo ... Asegúrese de utilizar el desbordamiento oculto para la envoltura externa,
Aquí hay una Muestra de Código que fue hecha para Drupal. Sin embargo, también podría usarse para otros eliminando algunas líneas de código que son específicas de Drupal.
/*
* Jquery Code for Removing Dropdown Arrow.
* @by: North Web Studio
*/
(function($) {
Drupal.behaviors.nwsJS = {
attach: function(context, settings) {
$(''.form-select'').once(''nws-arrow'', function() {
$wrap_width = $(this).outerWidth();
$element_width = $wrap_width + 20;
$(this).css(''width'', $element_width);
$(this).wrap(''<div class="nws-select"></div>'');
$(this).parent(''.nws-select'').css(''width'', $wrap_width);
});
}
};
})(jQuery);
/*
* CSS Code for Removing Dropdown Arrow.
* @by: North Web Studio
*/
.nws-select {
border: 1px solid #ccc;
overflow: hidden;
background: url(''../images/icon.png'') no-repeat 95% 50%;
}
.nws-select .form-select {
border: none;
background: transparent;
}
La solución funciona en todos los navegadores IE, Chrome y Firefox. No es necesario agregar anchuras de ancho fijo mediante CSS. Todo está siendo manejado dinámicamente usando JQuery.!
Más Descrito en: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css
O bien, puede recortar la selección. Algo como:
select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }
Esto debería recortar 30px del lado derecho de la casilla de selección, quitando la flecha. Ahora suministre una imagen de fondo de 170px y listo, estilo selecto
Pruebe de esta manera:
-webkit-appearance: button;
-moz-appearance: button;
Luego, puede usar una imagen diferente como fondo y colocarla:
background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;
Hay otra manera para los navegadores moz:
text-indent:10px;
Si tiene un ancho definido para seleccionar, esta propiedad presionará el botón predeterminado de Dropbox en el área de selección.
¡Esto funciona para mi! ;)
Puede aumentar el ancho del cuadro y acercar la flecha a la izquierda de la flecha. esto luego te permite cubrir la flecha con un div blanco vacío.
Eche un vistazo: http://jsbin.com/aniyu4/86/edit
Sé que esta pregunta es un poco antigua, pero dado que aparece en Google, y esta es una solución "nueva":
appearance: normal Parece que funciona bien en Firefox para mí (versión 5 ahora). pero no en Opera e IE8 / 9
Como una solución para Opera e IE9, utilicé el :before pseudoselector para crear una nueva caja blanca y poner eso en la parte superior de la flecha.
Desafortunadamente, en IE8 esto no funciona. La caja se representa correctamente, pero la flecha sobresale de todos modos ...: - /
Usando select:before funciona bien en Opera, pero no en IE. Si miro las herramientas de desarrollador, veo que está leyendo las reglas correctamente, y luego simplemente las ignora (están tachadas). Así que utilizo un <span class="selectwrap"> alrededor de la <select> real.
select {
-webkit-appearance: normal;
-moz-appearance: normal;
appearance: normal;
}
.selectwrap { position: relative; }
.selectwrap:before {
content: "";
height: 0;
width: 0;
border: .9em solid red;
background-color: red;
position: absolute;
right: -.1em;
z-index: 42;
}
Es posible que necesite modificar esto un poco, ¡pero esto funciona para mí!
Descargo de responsabilidad: Estoy usando esto para obtener una buena copia impresa de una página web con formularios, por lo que no es necesario crear una segunda página. No soy un 1337 haxx0r que quiere barras de desplazamiento rojas, etiquetas <marquee> , y otras cosas :-) No aplique un estilo excesivo a los formularios a menos que tenga una muy buena razón.
Si bien no es una solución completa, he encontrado que ...
-moz-appearance: window;
... funciona hasta cierto punto. No puede cambiar el fondo (-color o -image) pero el elemento se puede volver invisible con color: transparente. No es perfecto, pero es un comienzo y no es necesario reemplazar el elemento de nivel del sistema con un js.
Un truco útil para mí es establecer la pantalla (selecciona) en inline-flex . Corta la flecha a la derecha de mi botón de selección. Sin todo el código agregado.
- Solo para Fx. Aún se necesita
-webkit appearancede navegador para Chrome, etc.
Use la propiedad pointer-events .
La idea aquí es superponer un elemento sobre la flecha desplegable nativa (para crear nuestro personalizado) y luego rechazar los eventos de puntero en él. [ver esta publicación ]
Aquí hay un FIDDLE funcionamiento usando este método.
Además, en esta respuesta SO , discutí esto y otro método en mayor detalle.
Yo estaba teniendo el mismo problema. Es fácil hacer que funcione en FF y Chrome, pero en IE (8+ que necesitamos apoyar) las cosas se complican. La solución más fácil que pude encontrar para los elementos de selección personalizada que funciona "en todos los .customSelect() donde probé", incluido IE8, está utilizando .customSelect()
basándose en la respuesta de @ JoãoCunha, un estilo CSS que es útil para más de un navegador
select {
/*for firefox*/
-moz-appearance: none;
/*for chrome*/
-webkit-appearance:none;
text-indent: 0.01px;
text-overflow: '''';
}
/*for IE10*/
select::-ms-expand {
display: none;
}
hackity hack ... una solución que funciona en todos los navegadores que he probado (Safari, Firefox, Chrome). No tiene ningún IEs por ahí, por lo que sería bueno si pudiera probar y comentar:
<div class="wrapper">
<select>
<option>123456789</option>
<option>234567890</option>
</select>
</div>
CSS, con imagen codificada en url:
.wrapper { position:relative; width:200px; }
.wrapper:after {
content:"";
display: block;
position: absolute;
top:1px; height:28px;
right:1px; width:16px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc+LxvN9AqGJTKQJMcYQM/+VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We+JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg==);
pointer-events: none;
}
select {
width: 100%;
padding:3px;
margin: 0;
border-radius: 0;
border:1px solid black;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
float:none!important;
background:white;
font-size:13px;
line-height: 1em;
height: 30px;
padding:6px 20px 6px 10px;
}
http://codepen.io/anon/pen/myPEBy
I''m using the :after-element to cover the ugly arrow. Since select doesn''t support :after, i need a wrapper to work with. Now, if you would click on the arrow, the dropdown won''t register it ... unless your browser supports pointer-events: none , which everyone except IE10- does: http://caniuse.com/#feat=pointer-events
So for me it''s perfect - a nice, clean, low-headache solution, at least compared to all the other options which include javascript.
tl;dr:
If IE10 (or lower) Users click the arrow, it won''t work. Works good enough for me...
Actualización: esto se solucionó en Firefox v35. Vea la esencia completa para más detalles.
Acabo de descubrir cómo eliminar la flecha de selección de Firefox . El truco es usar una mezcla de -prefix-appearance , text-indent y text-overflow . Es puro CSS y no requiere marcado adicional.
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '''';
}
Probado en Windows 8, Ubuntu y Mac, las últimas versiones de Firefox.
Ejemplo en vivo: http://jsfiddle.net/joaocunha/RUEbp/1/
Más sobre el tema: https://gist.github.com/joaocunha/6273016
If you don''t mind fiddling with JS, I wrote a small jQuery plugin that helps you do it. With it you don''t need to worry about vendor prefixes.
$.fn.magicSelectBox = function() {
var $e = this;
$e.each(function() {
var $select = $(this);
var $magicbox = $(''<div></div>'').attr(''class'', $select.attr(''class'')).attr(''style'', $select.attr(''style'')).addClass(''magicbox'');
var $innermagicbox = $(''<div></div>'').css({
position: ''relative'',
height: ''100%''
});
var $text = $(''<span></span>'').css({
position: ''absolute''
}).text($select.find("option:selected").text());
$select.attr(''class'', null).css({
width: ''100%'',
height: ''100%'',
opacity: 0,
position: ''absolute''
}).on(''change'', function() {
$text.text($select.find("option:selected").text());
});
$select.parent().append($magicbox);
$innermagicbox.append($text, $select);
$magicbox.append($innermagicbox);
});
return $e;
};
Fiddle here: JS Fiddle
The condition is that you have to style the select from scratch (this means setting the background and border), but you probably want to do this anyway.
Also since the function substitutes the original select with a div, you will lose any styling done directly on the select selector in your CSS. So give the select element a class and style the class.
Supports most modern browsers, if you want to target older browsers, you can try an older version of jQuery, but perhaps have to replace on() with bind() in the function (not tested)
The other answers didn''t seem to work for me, but I found this hack. This worked for me (July 2014)
select {
-moz-appearance: textfield !important;
}
In my case, I also had a woocommerce input field so I used this
.woocommerce .quantity input.qty {
-moz-appearance: textfield !important;
}
Actualicé mi respuesta para mostrar seleccionar en lugar de entrada
try this css
select {
/*for firefox*/
-moz-appearance: none;
/*for chrome*/
-webkit-appearance:none;
}
Its working
/* Try this in FF30+ Covers up the arrow, turns off the background */
/* still lets you style the border around the image and allows selection on the arrow */
@-moz-document url-prefix() {
.yourClass select {
text-overflow: '''';
text-indent: -1px;
-moz-appearance: none;
background: none;
}
/*fix for popup in FF30 */
.yourClass:after {
position: absolute;
margin-left: -27px;
height: 22px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
content: url(''../images/yourArrow.svg'');
pointer-events: none;
overflow: hidden;
border-right: 1px solid #yourBorderColour;
border-top: 1px solid #yourBorderColour;
border-bottom: 1px solid #yourBorderColour;
}
}