Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Paquielli

Drop Down Input com Imagem

Recommended Posts

Você quer estilizar o select ... ai só com js ;)

Existem alguns tópicos aqui no fórum com esse tipo de dúvida, veja se consegue achar um pela busca.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Código HTML:

 

<form name="Nome" action="#" method="post">

   	<input class="input" name="nome" value="Nome" onblur="if(this.value == '') {this.value = 'NOME';}" onfocus="if(this.value == 'NOME') {this.value = '';}"/>	<br/><br/>

	<input class="input" name="telefone" value="Telefone" onblur="if(this.value == '') {this.value = 'TELEFONE';}" onfocus="if(this.value == 'TELEFONE') {this.value = '';}"/>	<br/>

   	<input class="input" name="email" value="Email" onblur="if(this.value == '') {this.value = 'EMAIL';}" onfocus="if(this.value == 'EMAIL') {this.value = '';}"/>	<br/>

   	<input class="input" name="como" value="Onde nos conheceu?" onblur="if(this.value == '') {this.value = 'ONDE NOS CONHECEU?';}" onfocus="if(this.value == 'ONDE NOS CONHECEU?') {this.value = '';}"/>	<br />

   	<select class="select" id="assunto" name="assunto">  

           <option value="">Assunto</option> 	            
           <option value="DÚVIDAS">Dúvidas</option>
           <option value="CRÍTICAS">Críticas</option>
           <option value="SUGESTÕES">Sugestões</option>

       </select><br/>


       <textarea name="mensagem" value="MENSAGEM" class="textarea2">Mensagem</textarea>
       <br />
	 <input type="submit" class="submit" value=""/>

   </form>

 

Código CSS:

 

.select{
width:310px;
height:45px;
background-image:url(../imagens/reservas/input-down.png);
border:none;
font-size:14px;
font-family:Arial;
color:#772145;
padding-left:11px;
padding-top:11px;
margin-bottom:5px;
margin-right:12px;
float:left;
}

.input{
width:310px;
height:45px;
background:url(../imagens/reservas/input.png);
border:none;
font-size:14px;
font-family:Arial;
color:#772145;
padding-left:11px;
margin-bottom:5px;
margin-right:12px;
float:left;
}

.textarea{
width:670px;
height:98px;
background:url(../imagens/reservas/input-text.png);
border:none;	
font-size:14px;
font-family:Arial;
color:#772145;
padding-top:10px;
padding-left:11px;
margin-bottom:15px;
margin-right:10px;
float:left;
}

.textarea2{
width:310px;
height:103px;
background:url(../imagens/reservas/input-text2.png);
border:none;	
font-size:14px;
font-family:Arial;
color:#772145;
padding-top:10px;
padding-left:11px;
margin-bottom:15px;
margin-right:10px;
float:left;
}

.submit{
width:113px;
height:46px;
border:none;
cursor:pointer;
background:url(../imagens/reservas/btn.png) no-repeat;
}

.submit:hover{
width:113px;
height:46px;
border:none;
cursor:pointer;
background:url(../imagens/reservas/btn-hover.png) no-repeat;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.