Esta é uma técnica que já usava em SharePoint 2010. Neste artigo vou mostrar como actualizar esta técnica para ser usada com a estrutura HTML do SharePoint 2013.

Esta é a caixa de pesquisa standard do SharePoint 2013:

E isto é o design que queremos atingir:

Como funciona

Vamos definir uma imagem de background na div que contém todos os controlos de pesquisa. Esta imagem vai conter todo o design que queremos para os controlos. No exemplo em cima, à excepção do texto “Search this site”, é tudo uma background image.

Depois de definirmos a imagem temos que alterar o alinhamento e tamanho dos controlos para condizerem exactamente com as posições na imagem de background.

Depois só temos que esconder estes controlos removendo quaisquer cores de fundo, bordas, imagens, etc.

O código

#searchInputBox {
 background: url('/_catalogs/masterpage/images/bg_search.png') no-repeat scroll 0 0;
 height: 24px; /* a mesma altura da imagem */
 width: 225px; /* a mesma largura da imagem */
}

#SearchBox > div {
 border: 0;
}

#SearchBox > div > input {
    border: 0 none;
    font-size: 11px;
    /* ajustar o tamanho e posição da caixa de input */
    height: 22px; 
    margin: 0 19px 0 0;
    padding: 2px 0 0 30px;
    width: 110px; 
}

/* esconder o botão da dropdown */
#SearchBox .ms-srch-sb > .ms-srch-sb-navLink {
 display: none;
}

#SearchBox .ms-srch-sb > .ms-srch-sb-searchLink {
    border: 0 none;
    height: 24px;
    margin-left: 0;
    width: 62px;
}

/* remover a cor de fundo de hover no botao de pesquisa */
#SearchBox .ms-srch-sb-searchLink:hover,
#SearchBox .ms-srch-sb-navLink:hover {
 background-color: transparent;
}

/* esconder a imagem do botao de pesquisa (lupa) */
#SearchBox .ms-srch-sb > .ms-srch-sb-searchLink img {
 display: none;
}