Barra de pesquisa

3 participantes

Ir para baixo

Tópico resolvido Barra de pesquisa

Mensagem por Drift_King 31.10.13 20:30

Qual é minha questão:
Olá, eu queria saber como deixo minha "barra de pesquisa" igual ao do FDF, imagem abaixo: Barra de pesquisa UYYPeYz
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 11:31, editado 1 vez(es)
Drift_King
Drift_King
*

Membro desde : 06/07/2013
Mensagens : 35
Pontos : 63

http://21st-nwd.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra de pesquisa

Mensagem por GSCode 01.11.13 3:46

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://2img.net/i/fa/sprite_prosilver_navbar.png) no-repeat top left;
background-position: 0 -701px;
padding-left: 17px;
}
Até +
GSCode
GSCode
Membro

Membro desde : 11/10/2013
Mensagens : 591
Pontos : 1031

http://testforumbrasil.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra de pesquisa

Mensagem por BrunoH. 01.11.13 9:57

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.
BrunoH.
BrunoH.
Membro Entusiasta

Membro desde : 15/06/2012
Mensagens : 7675
Pontos : 10386

http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra de pesquisa

Mensagem por Drift_King 01.11.13 11:31

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

Membro desde : 06/07/2013
Mensagens : 35
Pontos : 63

http://21st-nwd.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos