1
resposta

Fiz de outro jeito no CSS.

O modo que selecionei os itens no CSS fora totalmente diferentes do que foi mostrado na resposta do instrutor, mas consegui o mesmo resultado. O modo como eu fiz pode dar algum problema que eu desconheço?

label {
    display: block;
}

button {
    display: block;
    position: relative;
    left: 73.4%;
    text-align: center;
    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 1em;
    font-family: "Open Sans Condensed", "Arial", sans-serif;
    font-size: 1.2em;
    border: none;
    margin-top: 1em;
}

button:hover, button:focus {
    background-color: #8C1D3D;
}

legend, form > label {
    font-weight: bold;
}

form > label {    
    padding-top: 1.5em;
}

input, textarea {
    width: 100%;
    border: 1px solid #ccc;
    padding: 0.5ch;
    font-family: inherit;
    font-size: 1em;
}

fieldset:nth-child(2) input{
    width: auto;
}

input:focus {
    background-color: #FFD;
}

input:invalid {
    box-shadow: 0 0 3px red;
}

fieldset:nth-child(2) label {
    display: inline;
}
1 resposta

Olá, Mathaus.

Não consegui ver nenhum problema que o seu código pode gerar. Na verdade gostei dele e achei ele bem claro :-)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software