Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Tamanho da input

Bom dia/tarde/noite!

Seguinte, hora que eu deixo as inputs do Nome e email com width 100%, a desgraça do campo do #name fica menos que a do #email por causa do autofocus

No momento que eu tiro o autofocus ele volta a ter o real 100% de width, e quando aplico o autofocus ele perde em torno de uns 10px de width e isso ta me deixando maluco Hahuahauhau

tem alguma correção ou algo que faça eu manter o autofocus e não ter essa redução de tamanho na box da input?

7 respostas

Boa tarde, João!

Tem como postar o teu arquivo CSS e o HTML com essa parte dos campos que estão apresentando esse comportamento?

       <fieldset>

                    <legend>Dados Pessoais:</legend>

                    <label for="nome">
                        Nome Completo:
                        <input id="nome" type="text" name="nome-usuario" 
                        placeholder="Digite seu nome" 
            <!-- autofocus fica aqui mas tirei pq n ajusta 100% do width -->
                        required 
                        pattern="[A-Za-z ']{4,}" 
                        title="Nome com pelo menos 4 caracteres, A-Z, a-z">
                    </label>



                    <label for="e-mail">
                        Email:
                        <input id="email" type="email" name="e-mail" placeholder="seu@email.com" required>
                    </label>

                </fieldset>

Posta o teu arquivo .css também.

eta viajei ahahuahaua srry

form>fieldset {
    margin-bottom: 2em;
}

legend {
    font-size: 120%;
    font-weight: bold;
}

input:focus, 
textarea:focus {
    background-color: #fffccc;
}

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

#nome, #email, #mensagem{
    width: 100%;
}

button {
    border: 0;
    font-family: "Open Sans Condensed", sans-serif;
    font-size: 1.2em;
    width: 10em;
    height: 50px;
    background-color: #3C1D3D;
    color: #fff;
    float: right;
    margin-top: 1em;
    margin-left: .2em;
}

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

fieldset>fieldset {
    display: inline;
}

input[value="outro"] ~ input {
    display: none;
}

input[value="outro"]:checked ~ input {
    display: inline;
}
solução!

João, testei teu código aqui e não houve alteração no width dos inputs. Encontrei algumas coisas para corrigir na sintaxe, como a tag input que está dentro da tag label. A tag label não engloba a input. Se fizer isso, as alterações no CSS do label podem interferir no input. O "for" do label do e-mail está "e-mail" enquanto o id do input do e-mail está grafado com "email", eles devem ser iguais, para que o navegador compreenda que deve setar o foco no input de e-mail quando clicar no label "Email:".

O código aqui está funcionando (com o width em 100% sem alteração na largura quando entra ou sai do foco). Salva aí e testa.

<fieldset>
    <legend>Dados Pessoais:</legend>
    <label for="nome">Nome Completo:</label>
    <input id="nome" type="text" name="nome-usuario" placeholder="Digite seu nome" autofocus required pattern="[A-Za-z ']{4,}" title="Nome com pelo menos 4 caracteres, A-Z, a-z">
    <label for="email">Email:</label>
    <input id="email" type="email" name="e-mail" placeholder="seu@email.com" required>
</fieldset>

Dá um retorno.

Fechou!

Valeu mesmo pela ajuda Manoel, são detalhes do código que nem percebi. Obrigado pela mão!

Abraço!

Beleza!

Boa sorte nos estudos!

Abraço.

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