A ver si podéis echarme una manita, aunque os aviso que el post va a ser un poco largo porque voy a meter imágenes y código para que me entendais mejor. El caso es que estoy haciendo una web con wordpress y tengo un problema con un combobox. El combobox lo he realizado desde el propio wordpress para que así, si el cliente quiere añadir o quitar algo lo pueda hacer sin tener que irse a aptana o alguno de estos.
Esto es lo que tengo que hacer:
Total que en wordpress he hecho esto:
Código:
Como este combo tiene que tener estilo, pues el css que he realizado es este:<div class="caja"> <select id="comboHome" name="selCombo" size="1"> <option value="link pagina 0"></option> <option value="link pagina 1">Mi web está “pasada de moda”</option> <option value="link pagina 2">Quiero más visitas en mi web</option> </select> </div>
Código:
El problema viene tanto en chrome como en firefox (En IE también, pero no he sacado pantallazo de eso).caja{ text-align: center; margin:20px auto 40px auto; border:1px solid #FFFFFF; height:40px; overflow: hidden; position:relative; width: 470px; } select#comboHome { border: 1px solid #FFF; color:#FFFFFF; font-size: 16px; background-color: rgba(30,30,30,.5); padding: 10px; width: 470px; } select:focus{ outline: none;} .caja::after{ border:1px solid #FFFFFF; content:"\022c1"; color:#FFFFFF; display:table-cell; padding-top:7px; text-align:center; width:40px; height:40px; background-color:transparent; position:absolute; top:0; right:0px; pointer-events: none; }
Chrome:
Firefox:
Como veis en firefox se ve el cuadrado del combo, pero es que en chrome si os fijais bien, la flechita también aparece.
Mi pregunta es si sabéis cómo prodría quitar eso para que quedase bien.
Un saludo