Ir para conteúdo

POWERED BY:

Arquivado

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

Ronaldo Lanhellas

Mudar cores do campo do formulário

Por , em Desenvolvimento frontend

Recommended Posts

Ronaldo Lanhellas    0

Ronaldo Lanhellas
Postado

Bem, eu sou leigo em php e queria que alguem me explicasse de uma forma bem fácil de entender como fazer para mudar as cores do campo de um formulário de cadastro que estou criando.

Aqui está o código do formulário :

<form id="form1" name="form1" method="post" action="inserir.php">
  <p>ID do Patrocinador 
	<input name="codigo" type="text" id="codigo">
	<br />
  </p>
  <p>Nome 
	<input type="text" name="nome" id="nome" />
  </p>
  <p>E-mail 
	<input name="email" type="text" id="email"/>
	<br />
	<input type="submit" name="botao" value="Cadastrar" />
	<input type="reset" name="botao2" value="Limpar" />
  </p>
</form>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Isso é feito com Javascript.

Uma forma fácil é essa:

// super-hiper-mega função de estilizar inputs
window.onload=function(){
var arrObj = document.getElementsByTagName("INPUT");

	for( var i=0; i<arrObj.length; i++ ) {
		arrObj[i].onfocus= function() {
		mudarClass('nodestaque',this);
		}
		arrObj[i].onblur= function() {
		mudarClass('tabe',this);
		}
	}
	
var arrObj2 = document.getElementsByTagName("TEXTAREA");
	for( var i=0; i<arrObj2.length; i++ ) {
		arrObj2[i].onfocus= function() {
		mudarClass('nodestaque',this);
		}
		arrObj2[i].onblur= function() {
		mudarClass('tabe',this);
		}
	}
	function mudarClass(nomeClasse,ids){
		ids.className = nomeClasse;
	}
}
Esse é um script Javascript.. que você pode salvar num arquivo externo.

e esse css:

/*estilos dos inputs*/
.nodestaque {
	padding: 2px;
	background-color: #FDF3F2;
	border: 1px solid #ED6E37;
}
.tabe {
	border: 1px solid #ED6E37;
	background-color: #fff;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

eibon    2

eibon
Postado

Tópico movido

Origem: Programação » PHP

Destino: Desenvolvimento » Webstandards: CSS / XML / XHTML / HTML

Bruno...pelo que entendi é mais simples que isso.

Para mudar a cor de fundo se faz:

#id { background-color: cor_em_hex; }
.class { background-color: cor_em_hex; }
elemento { background-color: cor_em_hex; }

Para tais estilos serem aplicados,você teria que fazer algo como:

<elemento1 class="class"></elemento>
<elemento2 id="id"></elemento>
<elemento></elemento>

Com JS,pega-se o elemento com DOM e seta-se a propriedade style.background como o número equivalente a cor em base hexadecimal.

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eddy Goulart    2

Eddy Goulart
Postado

Você pode fazer isso com CSS, estuda um pouco CSS(folhas de estilos)

 

ou com javascript

vou dar um exemplo bem simples

 

 

<script>
//aqui troca a cor do fundo
function trocarCor(este){
   este.style.background = "#CC0000";
}
</script>

<html>
	<input type="text" name="nome" id="nome" onclick="trocarCor(this)" />
</html>

 

não testei, mas deve funcionar

quando clicar no input vai trocar a cor dele

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito