CSS Grid 布局使用表单更改输入宽度

Question

我正在尝试使用 CSS Grid 设计一个响应式表单，但是当我开始输入任何信息时，输入宽度变为 1 col

这是 CSS：

.cftv_representante_form {
    background-color: rgb(82, 82, 82);
    color: #fff;
}
.cftv_representante_form {
    display: grid;
    grid-auto-columns: auto;
    grid-auto-rows: auto auto auto auto auto auto auto auto auto auto auto;
    grid-template-areas: "h1" "p" "nome1" "nome2" "email1" "email2" "cpf1" "cpf2" "telefone1" "telefone2" "botao"
}
.cftv_representante_form p {
    padding: 5px 0 30px 0;
}
.cftv_representante_form input {
    font-size: 1.5em; 
    border-radius: 15px; 
    width: 100% !important;  
    color: #000; 
    border: 1px solid rgba(255,255,255,0.3); 
    margin-top:10px;
    margin-bottom: 10px; 
    padding: 10px;
}

@media screen and (min-width: 540px) {
    .cftv_representante_form {
        display:grid;
        grid-auto-columns: auto 15px auto !important;
        grid-auto-rows: auto auto auto auto auto auto auto !important;
        grid-template-areas: "h1 h1 h1" "p p p" "nome1 nome1 nome1" "nome2 nome2 nome2" "email1 email1 email1" "email2 email2 email2" "cpf1 . telefone1" "cpf2 . telefone2" "botao botao botao" !important;
    }
}

这是 HTML：

        <form method="get" action="cftv_captar.asp">
            <div class="artigo cftv_representante cftv_representante_form">

                    <h1 style="grid-area: h1">Seja um de nossos representantes:</h1>
                    <p style="grid-area: p"><i style="color:#a0c402;">Todos os campos abaixo são obrigatórios</i></p>
                    <label style="grid-area: nome1">Nome completo:</label>
                    <input style="grid-area: nome2" type="text" name="txtNome" id="txtNome" placeholder="Nome Sobrenome" maxlength="100" required />
                    <label style="grid-area: email1">E-mail:</label>
                    <input style="grid-area: email2" type="text" name="txtEmail" id="txtEmail" placeholder="nome@dominio.com.br" maxlength="80" required />
                    <label style="grid-area: cpf1">CPF:</label>
                    <input style="grid-area: cpf2" type="text" name="txtCPF" id="txtCPF" placeholder="___.___.___-__" maxlength="14" required />
                    <label style="grid-area: telefone1">Telefone celular:</label>
                    <input style="grid-area: telefone2" type="text" name="txtCelular" id="txtCelular" placeholder="(__)_____-____" maxlength="15" required />
                    <input style="grid-area: botao" class="cftv_btn_envia_representante" type="submit" value="Enviar">  

            </div>
        </form>

这是它的显示方式：

但是，当光标进入第一个输入时，输入宽度会发生这种情况：

第一个输入发生的情况发生在所有其他输入上。

如果我更改下面这个的 HTML，问题不会发生，但布局也不适用于网格，因为 CSS 应用于<div> 而不是<form>：

<div class="artigo cftv_representante cftv_representante_form">
                <form method="get" action="cftv_captar.asp">
                    <h1 style="grid-area: h1">Seja um de nossos representantes:</h1>
                    <p style="grid-area: p"><i style="color:#a0c402;">Todos os campos abaixo são obrigatórios</i></p>
                    <label style="grid-area: nome1">Nome completo:</label>
                    <input style="grid-area: nome2" type="text" name="txtNome" id="txtNome" placeholder="Nome Sobrenome" maxlength="100" required />
                    <label style="grid-area: email1">E-mail:</label>
                    <input style="grid-area: email2" type="text" name="txtEmail" id="txtEmail" placeholder="nome@dominio.com.br" maxlength="80" required />
                    <label style="grid-area: cpf1">CPF:</label>
                    <input style="grid-area: cpf2" type="text" name="txtCPF" id="txtCPF" placeholder="___.___.___-__" maxlength="14" required />
                    <label style="grid-area: telefone1">Telefone celular:</label>
                    <input style="grid-area: telefone2" type="text" name="txtCelular" id="txtCelular" placeholder="(__)_____-____" maxlength="15" required />
                    <input style="grid-area: botao" class="cftv_btn_envia_representante" type="submit" value="Enviar">  
                </form>
            </div>

我尝试将 CSS 布局应用于<form> 和其他几次小尝试，但没有成功。

你们知道我是否可以将任何 CSS 特征应用到<form>，这样它就不会妨碍您？

Answer 1

我和你有同样的问题。只需将其放入 div 即可解决。 在你的情况下，它会是这样的：

<div class="artigo cftv_representante cftv_representante_form">
            <form method="get" action="cftv_captar.asp">
                <h1 style="grid-area: h1">Seja um de nossos representantes:</h1>
                <p style="grid-area: p"><i style="color:#a0c402;">Todos os campos abaixo são obrigatórios</i></p>
                <label style="grid-area: nome1">Nome completo:</label>
                <div id="nomeBox" style="grid-area: nome2"><input style= type="text" name="txtNome" id="txtNome" placeholder="Nome Sobrenome" maxlength="100" required /></div>
                <label style="grid-area: email1">E-mail:</label>
                <input style="grid-area: email2" type="text" name="txtEmail" id="txtEmail" placeholder="nome@dominio.com.br" maxlength="80" required />
                <label style="grid-area: cpf1">CPF:</label>
                <input style="grid-area: cpf2" type="text" name="txtCPF" id="txtCPF" placeholder="___.___.___-__" maxlength="14" required />
                <label style="grid-area: telefone1">Telefone celular:</label>
                <input style="grid-area: telefone2" type="text" name="txtCelular" id="txtCelular" placeholder="(__)_____-____" maxlength="15" required />
                <input style="grid-area: botao" class="cftv_btn_envia_representante" type="submit" value="Enviar">  
            </form>
        </div>