Estilizar campo Select

[GustavoDose 1]

Bom dia estou fazendo um menu com ul li e campo select mas nao consigo formatar e deixar o campo select legal.

 

 

Codigo

 

<ul>

<li>

<select>

<option>TESTE</option>

<option>TESTE</option>

<option>TESTE</option>

<option>TESTE</option>

</select>

<li>

</ul>

 

queria saber como formatar o campo select, consigo formatar com o css mais mesmo assim ele fica com um visual feio, gostaria de saber de alguma outra forma pra estilizar

[Denis.Santos 7]

Qual o tipo de estilização você quer fazer?

[fabricioserralvo 5]

Para uma estilização completa recomendo o customSelect, é um plugin para jQuery.

 

http://adam.co/lab/jquery/customselect/

 

[]'s

[Heitor Sousa 9]

Usa css3

 

#select { opacity: 0; filter:alpha(opacity=0); } #select2 { background: url(img/foto.png) no-repeat; }

 

Olha esse site pra você ter uma idéia:

 

http://bavotasan.com/2011/style-select-box-using-only-css/

[GustavoDose 1]

Então gostaria que estilizar para que ficasse com um visual legal, quando estilizo com css ainda não me agrada queria que ele ficasse parecido com o formatação de um botão.

 

Nao sei se consegui ser claro.

Heitor Sousa bem bom esse exemplo mais ainda preciso de algo com um visual um pouco melhor

 

:( não sei se to conseguindo ser claro

[Wanderson Valerio 102]

Eu conheço uma forma usando CSS puro, porém os browsers mais antigos não iriam gostar... Serve ou precisa ser cross-browser?

Veja:

[GustavoDose 1]

Serve sim sem problrmas Wanderson

[Wanderson Valerio 102]

 

<label class="drop-down-select">
    <select name="empresa_ramo">
        <option value="" selected="selected">Selecione seu ramo de atividade</option>
        <option value="acessorios">Acessórios</option>
        <option value="bijouterias">Bijouterias</option>
        <option value="autopecas">Autopeças</option>
        <option value="automacao">Automação</option>
        <option value="publicidade-e-propaganda">Publicidade e Propaganda</option>
       <option value="comunicacao-visual">Comunicação Visual</option>
    </select>
</label>
 
.drop-down-select {
    position: relative;
    float: left;
}
 
.drop-down-select select {
    width: 306px;
    display: block;
    float: left;
    padding: 10px;
    border: 1px solid #DDD;
    margin-bottom: 10px;
    font: 1.3em 'signika_regular';
    color: #333;
 
    -webkit-transition: border 0.2s;
    -moz-transition: border 0.2s;
    -ms-transition: border 0.2s;
    -o-transition: border 0.2s;
    transition: border 0.2s;
}
 
.drop-down-select::after {
    width: 36px;
    height: 36px;
    display: 'block';
    content: '';
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 99999;
    background: #EEE url('../img/up-down.png') no-repeat center center;
    font: 1.3em 'signika_bold';
    pointer-events: none;
    border-left: 1px solid #DDD; 
    -webkit-transition: border 0.2s;
    -moz-transition: border 0.2s;
    -ms-transition: border 0.2s;
    -o-transition: border 0.2s;
    transition: border 0.2s;
}

Link da imagem: https://ssl.gstatic.com/ui/v1/disclosure/grey-disclosure-arrow-up-down.png

[Bergs 53]

@Wanderson vc tem um link desse seu botão rodando online, grato.

 

Vi que vc postou a imagem do select também, valeu.