Select Box (text-align)

[N3lson]

Bom dia, estou a ter aqui um quebra cabeças que não consigo resolver,

O problema é o seguinte, tenho uma select box com as jornadas e gostaria de alinhar á direita.

No Firefox funciona bem mas no Chrome e IE não

Aqui está

http://www.sccabecudense.com

css

	 .styled-select {
	    width: 220px;
	    height: 30px;
	    overflow: hidden;
	    background: url('../images/seta.jpg') no-repeat right #ddd;
	    border: 1px solid #ccc;
	    z-index: 999;
    }

    .styled-select select {
	    background: transparent;
	    width: 240px;
	    padding: 5px;
	    font-size: 12px;
	    line-height: 1;
	    border: 0;
	    border-radius: 0;
	    height: 34px;
	    -webkit-appearance: none;
	    -moz-appearance: none;
	    appearance: none;
    }

    select::-ms-expand {
	    display: none;
    }

    .styled-select select option
    {
	    background: transparent;
	    float:left;
	    position:relative;
	    width: 200px;
	    padding:3px 1px;
	    text-align:right !important;
	    font-size:11px
    }

[KTachyon]

Eu diria para transformares o select nativo num elemento HTML utilizando, por exemplo, o selectmenu do JQuery UI. Assim passas a ter controlo sobre o CSS do select.

[N3lson]

Eu diria para transformares o select nativo num elemento HTML utilizando, por exemplo, o selectmenu do JQuery UI. Assim passas a ter controlo sobre o CSS do select.

Obrigado pela sua resposta, vou tentar, embora tenha preferencia no nativo.

[KTachyon]

O nativo vai ter um estilo diferente para cada browser e sistema operativo. Se queres ter consistência no layout de uma página web não deves utilizar componentes nativas.

[N3lson]

Entendo mas não percebo muito de jquery.

Esta select box provem de criação via php, o processo para adaptar é apenas trabalhando no css ou tem-se de efectuar alterações do js para trabalhar com o php ?

echo '<div class="styled-select">
   <select>
    <option selected disabled>JORNADAS E RESULTADOS</option>';
    echo '<option disabled>1ª VOLTA</option>';

while($t = $res->fetch_object())
{
 if($r == $segunda + 1){
	 echo '<option disabled>2ª VOLTA </option>';
 }
 echo '<option>'.
	 $t->equipa1.' - '.$t->equipa2.' [ '.sprintf('%02d',$t->resultado1) .'-'.sprintf('%02d',$t->resultado2).' ] 
    </option>';
 $r++;
}
echo '</select>
</div>';

$res->free_result();

[KTachyon]

Já tens o jQuery na tua página. Só precisas de adicionar o jQuery UI (tal como fizeste para o jQuery), atribuir uma classe ao select e fazer a chamada para transformar o teu select:

<select class="mySelect">

$(document).ready(function () {
   $("#foo0").carouFredSel();
   $("#foo1").carouFredSel();

   $(".mySelect").selectmenu(); // adicionas esta linha
});

[N3lson]

Obrigado, coloquei mas não deu

Edited August 30, 2014 at 11:07 AM by N3lson