[Resolvido] Como estilizo a setinha do select ?

[NetBoy16 72]

Queria estilizar a setinha do select e tb deixar uma setinha pra baixo e pra cima, como faco ?

[William Bruno 1501]

não dá.

 

você precisa refazer do zero, usando outros elementos.

Por exemplo divs, spans, ul, lis...

[NetBoy16 72]

hmm, bem que eles podiam fazer uma pseudoclasse ou algo do tipo. :natalohmy:

 

outra coisa, to tentando estilizar o hover do option do select:

 

#conteudo select option#hover {
   border-color: #787877;
   background: #42929C;
   color: #ffffff
}

 

Mas nao ta dando certo, oque estou fazendo de errado ?

[Leonardo™ 0]

NetBoy16 eu acho que não tem como estilizar o option em si. Já usei a pseudo-classe :hover no select e o option recebia a regra de estilo.

 

exemplo

select:hover {

    background: #CCC;
    border: 1px solid #333;

}

[NetBoy16 72]

Hmm, outra coisa, como eu faco pra definir uma regra onde ele vai estilizar somente o input que for type="text" ?

[Leonardo™ 0]

NetBoy16 acredito que seja mais fácil aplicar uma class em cada input que seja do tipo text se este estiver em menor número em seu formulário e depois realizar a estilização baseada nesse alvo (class).

 

exemplo

 

                   <form name="formContact" id="formContact" action="" method="post">
                       <label>
                           <span>Nome:</span>
                           <input class="typeText" type="text" name="name" />
                       </label>
                       <label>
                           <span>E-mail:</span>
                           <input class="typeText" type="text" name="mail" />
                       </label>
                       <label>
                           <span>Telefone:</span>
                           <input class="typeText" type="text" name="phone" />
                       </label>
                       <label>
                           <span>Mensagem:</span>
                           <textarea name="message" rows="30" cols="30"></textarea>
                       </label>
                       <button type="submit">Enviar!</button>
                   </form>

 

Veja que a maioria dos inputs são do tipo text estão é mais fácil aplicar uma class em tipos diferentes como password, submit etc.

[NetBoy16 72]

Entao, eu pensei nisso, mas o sistema tem dezenas de formularios com vários campos, vai dar uma trabalheira danada, eu lembro de algo que era assim: att^=alguma coisa, senao me engano serve pra fazer esse tipo de regra, mas nao me lembro muito bem como que é.

[Leonardo™ 0]

NetBoy16 nunca fiz isso que você mencionou. Pesquisei aqui no fórum e encontrei muito material sobre o assunto. Parece não ser cross-browser http://forum.imasters.com.br/topic/281671-estilizar-campos-diferentes-tipos-de-input/

 

http://www.w3schools.com/css/css_attribute_selectors.asp

 

Não quero ser chato, mas pesquisar um pouco faz bem ao cérebro. :thumbsup:

[NetBoy16 72]

Entao cara, mas pior que eu pesquisei, só que eu só havia pesquisado no google.

Deu certo, vlw cara :thumbsup:

[Rodrigo Zanotta 0]

Hmm, outra coisa, como eu faco pra definir uma regra onde ele vai estilizar somente o input que for type="text" ?

input[type="text"] {
 propriedades...
}