Estou tentando fazer um formulário de login constituído por dois campos de entrada com um preenchimento de inserção, mas esses dois campos sempre acabam excedendo os limites de seus pais; o problema decorre do preenchimento de inserção adicional . O que poderia ser feito para corrigir esse problema?
Snippet do JSFiddle: http://jsfiddle.net/4x2KP/
NB: O código pode não estar mais limpo. Por exemplo, o elemento span que encapsula as entradas de texto pode não ser necessário.
#mainContainer {
line-height: 20px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: rgba(0,50,94,0.2);
margin: 20px auto;
display: table;
-moz-border-radius: 15px;
border-style: solid;
border-color: rgb(40, 40, 40);
border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
border-radius: 2px;
border-radius: 2px 5px / 5px;
box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}
.loginForm {
width: 320px;
height: 250px;
padding: 10px 15px 25px 15px;
overflow: hidden;
}
.login-fields > .login-bottom input#login-button_normal {
float: right;
padding: 2px 25px;
cursor: pointer;
margin-left: 10px;
}
.login-fields > .login-bottom input#login-remember {
float: left;
margin-right: 3px;
}
.spacer {
padding-bottom: 10px;
}
/* ELEMENT OF INTEREST HERE! */
input[type=text],
input[type=password] {
width: 100%;
height: 20px;
padding: 5px 10px;
background-color: rgb(215, 215, 215);
line-height: 20px;
font-size: 12px;
color: rgb(136, 136, 136);
border-radius: 2px 2px 2px 2px;
border: 1px solid rgb(114, 114, 114);
box-shadow: 0 1px 0 rgba(24, 24, 24,0.1);
}
input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
background:rgb(242, 242, 242) !important;
}
input[type=submit]:hover {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -10px 10px rgba(255,255,255,0.1);
} <div id="mainContainer">
<div id="login" class="loginForm">
<div class="login-top">
</div>
<form class="login-fields" onsubmit="alert('test'); return false;">
<div id="login-email" class="login-field">
<label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
<span><input name="email" id="email" type="text"></input></span>
</div>
<div class="spacer"></div>
<div id="login-password" class="login-field">
<label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
<span><input name="password" id="password" type="password"></input></span>
</div>
<div class="login-bottom">
<input type="checkbox" name="remember" id="login-remember"></input>
<label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
<input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in"></input>
</div>
</form>
</div>
</div>
box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;Se tudo acima falhar, tente definir as seguintes propriedades para sua entrada, para que ocupe espaço máximo, mas não exceda:
fonte
As outras respostas parecem dizer para você codificar a largura ou usar um hack específico do navegador. Eu acho que existe uma maneira mais simples.
Calculando a largura e subtraindo o preenchimento (que causa a sobreposição do campo). Os 20 px vêm de 10 px no preenchimento esquerdo e 10 px no preenchimento direito.
fonte
min/max-width: 100%;não,box-sizing: border-box;não. Eu imagino colocar meu site inteiro em um contêiner e dar preenchimento funcionaria, mas não quero fazer isso apenas para essa correção simples.Tente mudar
box-sizingparaborder-box. Opaddingestá adicionando aoswidthseusinputelementos.Veja a demonstração aqui
CSS
+
box-sizingfonte
O preenchimento é adicionado à largura total. Como o contêiner possui uma largura de pixel, é melhor fornecer também uma largura de pixel às entradas, mas lembre-se de remover o preenchimento e a borda da largura definida para evitar o mesmo problema.
fonte
Tentei essas soluções, mas nunca obtive um resultado conclusivo. No final, usei a marcação semântica adequada com um conjunto de campos. Ele economizou a necessidade de adicionar cálculos de largura e qualquer tamanho de caixa.
Também permite definir a largura do formulário conforme necessário e as entradas permanecem dentro do preenchimento necessário para as bordas.
Neste exemplo, coloquei uma borda no formulário e no conjunto de campos e um fundo opaco na legenda e no conjunto de campos para que você possa ver como eles se sobrepõem e se assentam.
fonte
O preenchimento é essencialmente adicionado à largura; portanto, quando você diz
width:100%epadding: 5px 10pxna verdade está adicionando 20px à largura de 100%.fonte
Você também tem um erro no seu css com o ponto de exclamação nesta linha:
remova o ponto e vírgula antes dele. No entanto, o importante deve ser usado raramente e pode ser amplamente evitado.
fonte
Deseja que os campos de entrada sejam centralizados? Um truque para centralizar elementos: especifique a largura do elemento e defina a margem como automática, por exemplo:
Um link para o seu violino atualizado:
http://jsfiddle.net/4x2KP/5/
fonte