Hack x Crack - Comunidad de Seguridad informática

Programación => Programación Web => Mensaje iniciado por: elpre en Septiembre 21, 2015, 03:57:45 pm

Título: combobox para wordpress
Publicado por: elpre en Septiembre 21, 2015, 03:57:45 pm
Buenas a todos,

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:
(http://i.imgur.com/tsrWEZ3.jpg)

Total que en wordpress he hecho esto:
Código: [Seleccionar]
<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>
Como este combo tiene que tener estilo, pues el css que he realizado es este:
Código: [Seleccionar]
.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;
}

El problema viene tanto en chrome como en firefox (En IE también, pero no he sacado pantallazo de eso)
Chrome:
(http://i.imgur.com/qLwQ2pH.jpg)
Firefox:
(http://i.imgur.com/hrXxVdN.jpg)

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
Título: Re:combobox para wordpress
Publicado por: elpre en Septiembre 23, 2015, 10:25:03 am
Ya me respondo a mí mismo que he conseguido encontrar la respuesta:
en el css he añadido esto:
Código: CSS
  1. #selectHome {
  2.     border: 1px solid #FFF;
  3.     color:#FFFFFF;
  4.     font-size: 16px;
  5.     background-color: rgba(30,30,30,.5);
  6.     padding: 8px;
  7.     width: 470px;
  8.    height:40px;
  9.     -webkit-appearance: none;
  10.     -moz-appearance: none;
  11.     appearance: none;
  12. }
  13.  
Lo que está en negrita es lo que he añadido y es lo que quita en chroome y mozilla los fallos. En IE sigue apareciendo.

Un saludo.
Título: Re:combobox para wordpress
Publicado por: Krakakanok en Septiembre 23, 2015, 11:30:57 am
elpre te he modificado el mensaje poniendo el tipo de code que era, css en este caso, y quitando las negritas ya que no se veian como tal.

Saludos.

PD: todo no esta estándar todavía, a ver si ya se equiparan y dejan de jodernos a los desarrolladores web.