Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Desafio: input estilizado

Este foi o meu resultado

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!

Deixo o código caso algum dev precise.


const CampoTexto = () =>{
    return(
        <ContainerEstilizado>
            <CampoTextoEstilizado placeholder="O que você procura?"/>
            <IconeLupa src={'/icones/search.png'} alt="ícone de lupa" />
        </ContainerEstilizado>
    )
}

export default CampoTexto

const ContainerEstilizado = styled.div`
    position: relative;
    display: inline-block;
`;

const CampoTextoEstilizado  = styled.input`
    height: 56px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 2px solid #C98CF1;
    background: transparent;
    box-sizing: border-box;
    width: 566px;
    color: #D9D9D9;
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
`

const IconeLupa = styled.img`
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
`;