O meu ícone só ficou na posição correta com o top em 40%. Se coloco top 100% o ícone fica em cima da label "email", e se coloco bottom 100% fica em cima do nome. O que eu fiz de errado?
label[for],
button {
display:block;
}
legend, .mensagem {
font-weight:bold;
margin-top:1em;
}
input[type="text"],
input[type="email"],
textarea{
font-family: inherit;
font-size: 100%;
padding: .25em .5em;
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
}
button{
display:block;
font-family: "Open Sans Condensed", "Arial", sans-serif;
font-size:1.2em;
background-color: #3C1D3D;
color: white;
padding: .5em 1em;
/*float:right;
clear:right;*/
border:0;
margin-left: auto;
margin-top: 1em;
}
.assunto>fieldset{
display:inline;
}
label[for="outro"]{
display:inline;
}
input[name="outro-assunto"]{
width:auto;
}
input:invalid{
box-shadow: 0 0 3px red;
}
input:focus,
textarea:focus{
background-color: #FFD
}
button:hover,
button:focus{
background-color:#8C1D3D;
}
input[value="Outro"]~ input{
display:none;
}
input[value="Outro"]:checked ~ input{
display:inline;
}
label[for="nome"]{
position:relative;
}
label[for="nome"]:after{
content:"";
background-image:url(../imagens/usuario.png);
background-size: 50% 50%;
background-position: center;
background-color:#666;
background-repeat: no-repeat;
width: 2em;
height: 2em;
position: absolute;
top:40%;
left:0;
}
#nome{
width: calc(100% - 2em);
position: relative;
left: 2em;
}
