Barra de pesquisa

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

Resolvido Barra de pesquisa

Mensagem por Drift_King em 31/10/13, 06:30 pm

Qual é minha questão:
Olá, eu queria saber como deixo minha "barra de pesquisa" igual ao do FDF, imagem abaixo:
Esperando respostas Feliz

Endereço do meu fórum:
http://kingstreetnwd.forumeiros.com/

Versão do fórum:
PHPBB3


Última edição por Drift_King em 01/11/13, 09:31 am, editado 1 vez(es)
avatar

Drift_King
Nível 5

Masculino
Inscrito dia : 05/07/2013
Mensagens : 35
Pontos Ativos : 63

Ver perfil do usuário http://21st-nwd.forumeiros.com/

Resolvido Re: Barra de pesquisa

Mensagem por GSCode em 01/11/13, 01:46 am

Olá,

DKazinho safadinho (8.. HUEHEU

Código:
/* Botão Buscar -> Ungreli */
#search-box input.button2{-webkit-border-radius:2px;-webkit-user-select:none;background-color:#f5f5f5;background-image:-o-linear-gradient(top,whiteSmoke,#F1F1F1);border:1px solid rgba(0,0,0,0.1);border-radius:2px;color:#666;cursor:pointer;font-size:11px;font-weight:700;height:29px;line-height:18px;margin:11px 6px;min-width:54px;padding:0 8px;text-align:center}#search-box input{-moz-box-sizing:content-box;background:#fff;border:1px solid #D9D9D9;border-width:1px;color:#000;height:23px}
#search #keywords:focus{width:300px}#search #keywords{-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out;transition:all 1s ease-in-out;width:150px}img[src="http://i66.servimg.com/u/f66/15/86/37/09/suppor10.png"]{height:auto;width:46px}

/* Efeito Botão Buscar -> Ungreli */
#search-box input.button2 {
font-size: 12px !important;
}
Ou:

Código:
#search #keywords {
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
width: 150px;
}
#search-box #keywords {
background-color: white;
width: 95px;
}
#search-box input {
-moz-box-sizing: content-box;
background: white;
border: 1px solid #D9D9D9;
border-width: 1px;
color: black;
height: 23px;
}
input.search {
background: url(http://illiweb.com/fa/sprite_prosilver_navbar.png) no-repeat top left;
background-position: 0 -701px;
padding-left: 17px;
}
Até +
avatar

GSCode
Usuário destaque

Masculino
Inscrito dia : 11/10/2013
Mensagens : 590
Pontos Ativos : 1031

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

Resolvido Re: Barra de pesquisa

Mensagem por BrunoH. em 01/11/13, 07:57 am

Olá,

Adicione este código a sua Folha de Estilo CSS:
Código:
#search #keywords {
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
width: 150px;
}
#search-box #keywords {
background-color: rgb(255, 255, 255);
width: 95px;
}
#search-box input {
background: rgb(255, 255, 255);
border: 1px solid rgb(217, 217, 217);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
color: rgb(0, 0, 0);
height: 23px;
}
#search-box input.button2 {
-webkit-user-select: none;
background-color: rgb(245, 245, 245);
border: 1px solid rgba(0, 0, 0, 0.0980392);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
border-radius: 2px;
color: rgb(102, 102, 102);
cursor: pointer;
font-size: 11px;
font-weight: 700;
height: 29px;
line-height: 27px;
margin: 11px 6px;
min-width: 54px;
padding: 0px 8px;
text-align: center;
}
#search #keywords:focus {
width:290px;
}
Até mais.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Barra de pesquisa

Mensagem por Drift_King em 01/11/13, 09:31 am

Obrigado, pode fechar o tópico *-*
avatar

Drift_King
Nível 5

Masculino
Inscrito dia : 05/07/2013
Mensagens : 35
Pontos Ativos : 63

Ver perfil do usuário http://21st-nwd.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