Como integrar um botão em uma entrada usando CSS moderno

Problema:
Criar um elemento visual onde um botão é perfeitamente integrado a um campo de entrada, permitindo a interação normal do usuário, preservando a visibilidade do texto e mantendo a acessibilidade e a compatibilidade do leitor de tela.

Solução: Flexbox e borda de formulário

A abordagem ideal envolve o uso de um layout flexbox junto com uma borda no elemento que o contém (formulário):

1. Posicionamento: Configure um flexbox com um layout de linha horizontal , permitindo que a entrada se expanda para preencher o espaço disponível.
2. Ocultação de entrada: Elimine a borda da entrada para ocultá-la efetivamente, fazendo com que pareça mesclada com a borda do formulário.
3. Foco do formulário: Crie um efeito de foco no próprio formulário, abrangendo visualmente a entrada e o botão.
4. Estilo do elemento: Aplique estilos ao botão para apresentação, como como borda, plano de fundo e cor.