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.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» quanto tempo vcs estao no forumeiros?
Hoje à(s) 12:04 pm por Shek

» Informações tooltip
Hoje à(s) 11:27 am por Harleen

» Problema de com aparência dos fóruns e sub fóruns
Hoje à(s) 11:24 am por Harleen

» Fundo Emoticon
Hoje à(s) 10:41 am por Luiz~

» Efeito desnecessário avatar
Hoje à(s) 10:40 am por Luiz~

» Alterrar CSS Cores entre outros , temas
Hoje à(s) 10:20 am por Luiz~

» Remover Legenda dos Botões do Menu
Hoje à(s) 10:16 am por Luiz~

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Luiz~
 
Harleen
 
Shek
 
Kenno LP
 
Kyo Panda
 
Ramon Rodrigues
 
Sennior
 
Flames
 
Holkis
 
Blackfyre
 

Quem está conectado
292 usuários online :: 10 usuários cadastrados, Nenhum Invisível e 282 Visitantes :: 2 Motores de busca

[K]oke, admin186, Claudio Arthur, hggandy, Jefferson105, Luiz~, Quinn, rlmac, Sennior, Shek

[ 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 : 2768
Pontos Ativos : 3863

http://master-publicitario.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 : 11603

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
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4977
Pontos Ativos : 6632

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 : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

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

- Tópicos similares

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