Oi pessoal, tudo bem?
Estou com problemas no meu código e não consigo encontrar a solução, já vi um tópico com essa mesma dúvida aqui mas testei a solução sem sucesso, podem me ajudar por gentileza?
HTML:
<form>
<fieldset>
<legend>Seus dados</legend>
<label for="nome" class="com-icone">Nome completo</label>
<input id="nome" type="text" name="nome" required autofocus pattern="[A-Za-z ']{4,}" title="O nome precisa ter pelo menos 4 caracteres">
<label for="email" class="com-icone">E-mail</label>
<input id="email" type="email" name="email" required placeholder="seu@email.com">
</fieldset>
<fieldset>
<legend>Assunto</legend>
<label>
<input type="radio" name="assunto" value="Blog">
Blog
</label>
<label>
<input type="radio" name="assunto" value="Serviço">
Serviço
</label>
<fieldset>
<input type="radio" name="assunto" value="Outro" id="outro">
<label for="outro">
Outro
</label>
<input type="text" name="outro-assunto">
</fieldset>
</fieldset>
<label for="mensagem">Mensagem</label>
<textarea id="mensagem" name="mensagem" cols="60" rows="10" placeholder="Digite aqui sua mensagem"></textarea>
<button type="submit">Enviar mensagem</button>
</form>
CSS:
/* adicionamos essa classe aos rótulos que terão ícone */
.com-icone::after {
content: '' /* não esquecer do content! */
width: 2em;
height: 2em;
background-color: #8C1D3D;
background-size: 50% 50%; /* para a imagem ter 1em x 1em; */
background-position: center;
background-repeat: no-repeat;
}
.com-icone {
position: relative;
}
.com-icone::after {
position: absolute;
top: 100%;
left: 0;
}
.com-icone + input {
position: relative;
left: 2em;
}
.com-icone + input {
width: calc(100% - 2em);
}
.com-icone[for="nome"]::after {
background-image: url(../imagens/usuario.png);
}
.com-icone[for="email"]::after {
background-image: url(../imagens/email.png);
}
Valeu pessoal!