Jquery + Form

[Leandro D. 0]

Olá pessoal! Não sei se estou postando no local exato, mas acredito que seja pois estou usando jquery. Tenho o formulário abaixo (imagem), estou usando jquery e css (encontrei este exemplo em um blog) para personalizar os campos (tamanho, borda, cores e efeito para mudar as cores no focus e no blur. Vejam o css e o script abaixo:

 

CSS (Só de alguns campos para não ficar grande)

<style type="text/css">
   label{
float:left;	
text-align:left;
width:40px;
padding-top:15px;
padding-right:10px;
padding-left:0px;
       font:bold 11px Arial;
   }
   #lbl2{
float:left;	
text-align:left;
width:100px;
padding-top:15px;
padding-right:10px;
padding-left:0px;
font:bold 11px Arial;
   }
   #depto{
   	width:200px;
   	padding:10px;
   	height:42px;
   	outline:none;
   	font:bold 11px Arial;
   }
   #email_cad{
   	width:200px;
   	padding:10px;
   	height:42px;
   	outline:none;
   	font:bold 11px Arial;
   }
   #email_cad_conf{
   	width:200px;
   	padding:10px;
   	height:42px;
   	outline:none;
   	font:bold 11px Arial;
   }
   .focusField{
   	border:solid 2px #73A6FF;
   	background:#EFF5FF;
   	color:#000;
   }
   .idleField{
   	background:#EEE;
   	color:#6F6F6F;
border: solid 2px #DFDFDF;
   }
</style>

 

SCRIPT (Só de alguns campos também)

<script type="text/javascript">
  $(document).ready(function() {
     $("#depto").addClass("idleField");
$("#depto").focus(function() {
	$(this).removeClass("idleField").addClass("focusField");
});
$("#depto").blur(function() {
   	$(this).removeClass("focusField").addClass("idleField");
   });
   $("#email_cad").addClass("idleField");
$("#email_cad").focus(function() {
	$(this).removeClass("idleField").addClass("focusField");
	if (this.value == this.defaultValue){ 
   		    	this.value = '';
			}
	if(this.value != this.defaultValue){
    			this.select();
    		}
   });
   $("#email_cad").blur(function() {
   	$(this).removeClass("focusField").addClass("idleField");
   	if ($.trim(this.value) == ''){
		    	this.value = (this.defaultValue ? this.defaultValue : '');
			}
   });
   $("#email_cad_conf").addClass("idleField");
$("#email_cad_conf").focus(function() {
	$(this).removeClass("idleField").addClass("focusField");
	if (this.value == this.defaultValue){ 
   		    	this.value = '';
			}
	if(this.value != this.defaultValue){
    			this.select();
    		}
   });
   $("#email_cad_conf").blur(function() {
   	$(this).removeClass("focusField").addClass("idleField");
   	if ($.trim(this.value) == ''){
		    	this.value = (this.defaultValue ? this.defaultValue : '');
			}
   });
</script>

 

O que eu queria saber na verdade é se teria alguma forma de mudar a seta do campo select com css, jquery ou javascript. Como vcs podem ver na imagem, o campo fica com os atributos do css e o efeito que o jquery faz ao selecionar, mas a seta fica padrão do navegador. Eu vi na internet que tem como usar imagem para substituir o select todo, mas eu queria manter o css e o jquery que eu já tenho, só queria alterar a "bendita" setinha. Alguém sabe de algo e pode me ajudar?!

[William Bruno 1501]

oq você tem q fazer é posicionar a seta q você quer com css, por cima dessa.

 

uma espécie de replacement. De uma forma q o click na tua seta, dispare o click no select original.

[Leandro D. 0]

William, tem algum exemplo ou link pra me passar. Não tenho nenhuma idéia de como fazer isto. Quando você diz posicionar seta que eu quero você se refere a uma imagem, correto?!

[William Bruno 1501]

Sim, uma imagem(tag <img />) posicionada com position: absolute, top, left..

 

css básico mesmo.

[Leandro D. 0]

Sim, uma imagem(tag <img />) posicionada com position: absolute, top, left..

 

css básico mesmo.

William, esqueci de mencionar uma coisa, sou novato neste negócio css e jquery. Estou estudando e ao mesmo tempo usando o fórum imasters para aprender mais (me ajudou em várias situações), então se você puder exemplificar um código eu agradeceria, me ajudaria muito. Na outra resposta você fala para usar uma espécia de replacement, nem sei como usar isto.

[William Bruno 1501]

replacement é a técnica que denonima oq estamos fazendo.

 

apenas pesquise e estude. Não tenho exemplos, e no caso tb não tenho tempo de produzi-los.

a ajuda que posso te dar é essa.

[Leandro D. 0]

Falou cara! Desculpe pelo encomodo :huh: irei ver se encontro algo...