Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Gaaratsu
 
Thiago
 
Koizumi Bia
 
YouTube3
 
juleic1123
 
BrunoLemos
 

Quem está conectado
250 usuários online :: 6 usuários cadastrados, Nenhum Invisível e 244 Visitantes :: 3 Motores de busca

BrunoLemos, Deimon_Phoenix, hamesashek, juleic1123, Lincoln, odelgado

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Colocar efeito de caixa buscar suave

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Colocar efeito de caixa buscar suave

Mensagem por IsmaelS. em 11/11/15, 07:19 pm

Detalhes da questão


Endereço do fórum: http://master-publicitario.forumeiros.com/
Versão do fórum: PhpBB3

Descrição


Olá!

Eu estou a usar este código para a caixa de buscar no fórum, basicamente como a do FdF:
Código:
#forum-search .inputbox, #search .inputbox, #search_menu .inputbox, .inputbox.desc_search_input {
    background: #FFF;
    border: 1px solid #39C;
    border-radius: 3px 0 0 3px;
    height: 22px;
    margin-right: -2px;
    padding: 3px;
}
#forum-search .button2, #search input.button2, #search_menu .button1, .desc-search input.button2 {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat 50% 50% #39C;
    border: none;
    border-radius: 0 3px 3px 0;
    font-size: 0;
    height: 30px;
    width: 30px!important;
}
#search-box #keywords:focus {
    width: 300px!important;
}

E ao clicar nela aumenta a caixa de escrever, só que não é efeito suave ou seja é instantâneo, seria possível colocar como o da FdF suave?


Última edição por IsmaelS. em 11/11/15, 07:47 pm, editado 1 vez(es)

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/
  • 0

Resolvido Re: Colocar efeito de caixa buscar suave

Mensagem por Ace em 11/11/15, 07:23 pm

Olá,

Seria isto? (Aplique em seu CSS)

#search-box #keywords{
padding-right: 20px;
transition: 500ms;
width: 130px;
}
#search-box #keywords:focus {
width: 300px;
}

Att.
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Colocar efeito de caixa buscar suave

Mensagem por Fraise em 11/11/15, 07:25 pm

Olá!

Caso o código do Ace por ventura não funcione, adicione à sua folha de estilos:
Código:
#search-box #keywords:focus { transition-duration: 0.5s; }

Abraços.
Fraise
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5023
Pontos Ativos : 6703

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Colocar efeito de caixa buscar suave

Mensagem por IsmaelS. em 11/11/15, 07:47 pm

Obrigado a ambos mas o código do Ace resultou na perfeição, resolvido!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum