Ir para conteúdo

POWERED BY:

Arquivado

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

Tayane Amaral

Mudar a cor do Textfield enquanto está SELECIONADO

Recommended Posts

Gostaria de mudar a cor padrão do textfield (caixa de texto) enquanto ele está SELECIONADO...

Trocar aquele amarelo padrão por outra cor via CSS.

 

1395407_10202324472221162_2128560818_n.j

 

Alguém me ajuda? :kiss:

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não tenho certeza pois não sou um Expert, mais tente botar a classe outline.

se não souber... bote antes do </head>

<style>
.teste:focus
{
border: 2px solid red;
outline:none;
}
</style>


também no seu input bote isto class="teste"

vai ter <input name=""> você bota antes de fechar as chaves >

de uma procurada mais na internet por Outline css.

 

 

Se for de seu interesse...

<style>
.teste {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
.teste:focus
{
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);	
}
</style>

 

 

 

Ele deixa um sombreado e faz um efeito muito legal, com glow.

Tayane, se for do seu estilo, bote isso no <style>

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

Não tenho certeza pois não sou um Expert, mais tente botar a classe outline.

 

se não souber... bote antes do </head>

 

<style>
.teste:focus
{
border: 2px solid red;
outline:none;
}
</style>

também no seu input bote isto class="teste"

 

vai ter <input name=""> você bota antes de fechar as chaves >

 

de uma procurada mais na internet por Outline css.

<style>
.teste {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
.teste:focus
{
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);	
}
</style>

Ele deixa um sombreado e faz um efeito muito legal, com glow.

Tayane, se for do seu estilo, bote isso no <style>

 

Obrigadaaa :D

 

Eu tinha usado isso:

 

form input[type=text]:focus {

border:3px solid #474684;

}

 

Porém ainda ficava aquela borda amarela padrão. Então eu adicionei o outline:none; e funcionou :clap:

O bom de usar do mesmo jeito que vc fez (em classe), é que determino onde eu quiser que seja aplicado.

Já o código que eu usei, aplica em tudo.

 

 

Muito obrigada mesmo!

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.