Como fazer uma barra de pesquisa personalizada?

Tenho tentado criar uma barra de pesquisa personalizada semelhante ao plugin discourse-search-banner. Não quero usar esse plugin, pois ele interfere na aparência do meu tema.

Como posso replicar essa funcionalidade em um <input type="text" /> de minha escolha?

Estava analisando o código-fonte do plugin e tentei adaptá-lo para usar apenas meu elemento HTML, mas não consegui resolver. Qualquer dica será bem-vinda!

Você se importaria de linkar esse plugin aqui? Não consigo encontrá-lo. Talvez também pudesse marcar o criador do plugin; ele pode ter algumas ideias.

Você está falando deste #theme-component?

Exatamente! Desculpe, foi minha culpa por não ter linkado. Farei uma edição.

Sem problemas, mas isso é um componente de tema e não um plugin, então isso altera algumas coisas. Especialmente porque os componentes de tema funcionam com lógica do lado do cliente e os plugins com lógica do lado do servidor. Ou você está procurando criar um plugin baseado nesse componente de tema?

Desculpe pela resposta tardia.

Não me importo se será um plugin ou um componente de tema, desde que consiga a funcionalidade desejada. Basicamente, o que preciso é espelhar o comportamento da pesquisa padrão (ícone na barra superior) em um campo de texto de minha escolha.

Como posso fazer isso?

Muitos problemas podem ser resolvidos no CSS.

O que está impedindo você de simplesmente inspecionar e modificar o CSS? Essa seria, de longe, a solução mais rápida.

No pior dos casos, faça um fork do TC e edite seu CSS?

Não é realmente o CSS, mas sim a colocação e como ele se encaixa na minha estrutura HTML. Se eu conseguir descobrir como modificar onde o componente é injetado, talvez tenha uma solução. Pode me indicar um caminho?

Com o componente de tema habilitado no seu site, inspecione o código com seu navegador e veja onde ele está posicionado. Ajuste-o no navegador para encontrar uma localização mais confortável e use isso para atualizar/editar um fork do TC. Isso deve funcionar.

Também há uma opção pronta para uso para o cabeçalho:

Se nenhuma delas servir e modificações de CSS não forem suficientes, você vai precisar se sujar com o código dos widgets :).