SharePoint 2010 Branding: Caixas de pesquisa originais apenas com CSS

Quer fazer algo mais complexo com os estilos da caixa de texto do SharePoint usando CSS? Aqui tem um exemplo de como o fazer.

A nossa caixa original:

O resultado final:

A ideia principal nesta implementação é colocar uma imagem com todos os elementos da pesquisa (input e botão) como fundo da área de pesquisa. Depois, ajustam-se as alturas e larguras dos elementos (input e botão) ao que temos no background. Para terminar, é apenas necessário camuflar os elementos, todas as borders e backgrounds têm de desaparecer.

Para perceber melhor como isto funciona, em baixo tem o exemplo da caixa inacabada com os controlos ainda visíveis. O botão parece pequeno demais porque a imagem que contem é do tamanho que se vê, no entanto a largura do botão deve ser a mesma do background.

Aqui esta o código que usei:

#s4-searcharea {
    background: transparent url('/_layouts/images/custom/search-box.png') no-repeat scroll 0 0;    
    height: 30px; /* height of image */
    width: 354px; /* width of image */
}

.s4-search input.ms-sbplain {
    background: transparent;
    border-color: transparent !important;
    color: #9ca052;
    height: 23px;
    padding-left: 30px; /* to acomodate the magnifier icon */
    padding-top: 0 !important;   
    width: 247px !important;
}

#banner .ms-sbgo a {
    border-color: transparent !important;
    display: block;
    height: 30px;
    width: 70px !important;
}

#banner .ms-sbgo > a > img {
    display: none;
}

Aqui ficam outros exemplos onde usei esta técnica: