Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17583
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Mudando a cor da borda do input ao clicar jQuery

28-04-2012 22:04

Esse script muda a cor da borda do input text ao clicar dentro do input. Ao deixar o input, a borda volta ao normal.

<style> .focus{border:2px solid blue;} .blur{border:1px solid #ccc;} </style>


<script src="jquery.js"></script> <script> $(document).ready(function() {     $('input[type="text"]').focus(function() { $(this).removeClass("blur").addClass("focus"); }); $('input[type="text"]').blur(function() { $(this).addClass("blur"); });   }); </script>


<form> <input type="text" name="" value=""> </form>

1
A melhor hospedagem para o seu site HostGator!
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17583
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Mudando a cor da borda do input ao clicar jQuery

28-04-2012 22:15

Existe também uma borda azul muito comum em alguns inputs. Para funcionar nesse script, use esse style.

<style> .focus{ -webkit-box-shadow:#06f 0 0 5px 0;-moz-box-shadow:#06f 0 0 5px 0;-o-box-shadow:#06f 0 0 5px 0;box-shadow:#06f 0 0 5px 0;z-index:1; } .blur{ -webkit-box-shadow:#ccc 0 0 0px 0;-moz-box-shadow:#ccc 0 0 0px 0;-o-box-shadow:#ccc 0 0 0px 0;box-shadow:#ccc 0 0 0px 0;z-index:1; } </style>

1
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado