Caixa de busca

Qual é minha questão:
Olá, estava visitando alguns tópicos quando acessei esse fórum:
http://pokedea.forumeiros.com/

Gostei bastante da search box no logo + um efeito de ampliação ao clicar para pesquisar.

Queria saber como fazer tal efeito, e como posicionar a search box no logo.
Aguardo.

Medidas que eu tomei para corrigir o problema:
N/A

Links e imagens do meu problema:
N/A

Endereço do meu fórum:
www.rb-forum.net/

Versão do meu fórum:
PUNBB

Olá, aceda a sua Folha de estilo CSS cole o codigo e salve.

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: #;
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 {
-moz-box-sizing: content-box;
background: white;
border: 1px solid #D9D9D9;
border-image: initial;
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;
}
input.inputbox {
width: 85%;
}
.inputbox {
background-color: #;
border: 1px solid #BCBCBC;
color: #00191C;
cursor: text;
padding: 2px;
}

Melhores cumprimentos.

http://www.rb-forum.net/forum
Não funcionou.

Deixei o código ativo para você ver.
Aguardo.

jpjupa escreveu:http://www.rb-forum.net/forum
Não funcionou.

Deixei o código ativo para você ver.
Aguardo.

por favor,como voce deixou seu menu assim ?
sem acabar

Não dou suporte á duvidas relacionadas ao estilo de meu fórum.
Para evitar plágios.

Até mais.


----------------------------------

Aguardo respostas sobre minha duvida !

Adiciona este código

Código:

#search-box input.button2 {
    background-color: #F5F5F5;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px 2px 2px 2px;
    color: #666666;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    height: 29px;
    line-height: 27px;
    margin: 11px 6px;
    min-width: 54px;
    padding: 0 8px;
    text-align: center;
}
p.nomargin {
    font-size: 1.1em;
    line-height: 1.3em;
    margin-bottom: 0;
}

#search-box #keywords {
    background-color: #FFFFFF;
    width: 95px;
}

#search-box input {
    -moz-box-sizing: content-box;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D9D9D9;
    color: #000000;
    height: 23px;
}

#search-box {
    float: right;
    margin-right: 5px;
    margin-top: 10px;
    white-space: nowrap;
}
#search-box{margin-bottom:5px}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:27px;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:290px}#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}

Não funcionou.
Deixei o código no css, para você checar.
Aguardo!

UP!

Up aew pessoal. !

Dando um UP ...

Tente este código

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: #;
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 {
-moz-box-sizing: content-box;
background: white;
border: 1px solid #D9D9D9;
border-image: initial;
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;
}
.inputbox {
background-color: #;
border: 1px solid #BCBCBC;
color: #00191C;
cursor: text;
padding: 2px;
}