3

Estoy realizando un "proyecto" para clase y al aplicar unos estilos al formulario los input de este tienen un 100% del width con respecto al div que lo contiene, estoy intentando que los input estén ocupen el mismo ancho que los botones de Entrar, Registrarse y Olvide mi Contraseña?. A continuación dejo los css y el html.

/*CSS del formulario, este css contiene los estilos del formulario  */

/* FORMULARIOS */

.cont-formulario{
    position: relative;
    width: 60%;
    margin: auto;
}

.sesion{
    padding-top: 20px;
}

input[type=text] {
    outline: none;
    background: rgba(0, 0, 0, .5);
    display: block;
    width: 100%;
    padding: 10px 15px;
    color: #fff;
    border: none;
    border-radius: 2px;
    border-bottom: 4px solid #ff851b;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 20px 0;
    transition: all .5s ease;
}

input[type=password] {
    outline: none;
    background: rgba(0, 0, 0, .5);
    display: block;
    width: 100%;
    padding: 10px 15px;
    color: #fff;
    border: none;
    border-radius: 2px;
    border-bottom: 4px solid #ff851b;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 20px 0;
    transition: all .5s ease;
}

input[type=email] {
    outline: none;
    background: rgba(0, 0, 0, .5);
    display: block;
    width: 100%;
    padding: 10px 15px;
    color: #fff;
    border: none;
    border-radius: 2px;
    border-bottom: 4px solid #ff851b;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 20px 0;
    transition: all .5s ease;
}

input[type=number] {
    outline: none;
    background: rgba(0, 0, 0, .5);
    display: block;
    width: 100%;
    padding: 10px 15px;
    color: #fff;
    border: none;
    border-radius: 2px;
    border-bottom: 4px solid #ff851b;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 20px 0;
    transition: all .5s ease;
}
  
input[type=submit] {
    background: #ff851b;
    color: #fff;
    border: none;
    width: 100%;
    padding: 10px 0;
    font-weight: normal;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 1px;
    font-size: 16px;
    cursor: pointer;
    transition: all .5s ease;
}

input[type=text]:focus {
    border-bottom: 4px solid #0075d9;
}

input[type=password]:focus {
    border-bottom: 4px solid #0075d9;
}

input[type=email]:focus {
    border-bottom: 4px solid #0075d9;
}

input[type=number]:focus {
    border-bottom: 4px solid #0075d9;
}
  
input[type=submit]:hover {
    background: rgba(0, 117, 217, 0.7);
}

.negativo{
    border-color: red !important;
}
.positivo{
    border-color: green !important;
}

.toggle{
    position: absolute;
    top: 7px;
    right: 7px;
    width: 100px;
    font-size: 12px;
    line-height: 25px;
    text-align: center;
    border-top: 2px solid #ff851b;
    border-bottom: 2px solid #ff851b;
    transition: all .5s ease;
    cursor: pointer;
}

.toggle span{
    letter-spacing: 1px;
}

.toggle:hover{
    border-top: 2px solid #0075d9;
    border-bottom: 2px solid #0075d9;
}

.box5 h2{
    margin: 0 0 28px 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.reset-password{
    background: rgba(0, 117, 217, 0.7);
    color: #fff;
    width: 100%;
    padding: 15px 0;
    text-align: center;
}

.reset-password a{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

.box5 .formulario{
    padding-bottom: 40px;
    display: none;
}

.box5 .formulario:nth-child(2){
    display: block;
}

::-webkit-input-placeholder { color: #fff; } 
 
:-moz-placeholder { /* Firefox 18- */ color: #fff; } 
 
::-moz-placeholder { /* Firefox 19+ */ color: #fff; } 
 
:-ms-input-placeholder { color: #fff; }

:focus::-webkit-input-placeholder{color:transparent;}



/*---------- CSS GENERAL -----------*/
/*CSS general, aquí tengo el grid y otros que son comunes para todos los html*/


*{
    padding: 0px;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
}

/* CSS GRID */
.container{
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 0.2fr 3fr 0.25fr;
}

.box{
    background: slateblue;
    color: #fff;
    text-align: center;
}

.box4{
    background: midnightblue;
}

.box5{
    background: #fff;
    color: #000;
}

.box1, .box2, .box3{
    background: #000;
}

.box7, .box8, .box9{
    background: maroon;
}

/* MENU HEADER */
header{
    margin-top: 20px;
    width: 500px;
    background-color: #000;
}

ul, ol{
    list-style: none;
}

.ul_nav li a{
    background-color: #000;
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

.ul_nav li a:hover{
    background-color: #434343;
}

.ul_nav > li{
    float: left;
}

/* MENU LATERAL IZQUIERDO */

.menuIzquierdo{
    margin-top: 20px;
    margin-left: 20px;
    width: 75%;
    text-align: left;
}

.menuIzquierdo > li > a{
    padding: 10px;
    text-decoration: none;
    background: midnightblue;
    color: #fff;
    display: block;
}

.menuIzquierdo > li > a:hover{
    background: cornflowerblue;
}

/* FECHA */
.fecha{
    padding: 0px;
    margin: 0px;
    width: 125px;
    border-style: none;
    color: #fff;
}

.ano, .mes{
    font-size: .75em;
}

.ano{
    margin-top: 5px;
    background-color: darkgreen;
}

.dia{
    background-color: darkseagreen;
}

.mes{
    background-color: darkgreen;
}

/* PIE DE PAGINA */

.liPiePag{
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
}

.liPiePag li a{
    text-decoration: none;
    color: #fff;
}

.liPiePag li a:hover{
    color: #ff851b;
}
<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Eventos Deportivos</title>
		<meta charset="utf-8"/>
		<script src="../js/login.js"></script>
		<script src="../js/calendario.js"></script>
		<script src="../js/avLegal.js"></script>
		<script src="../js/reg.js"></script>
		<script src="../js/us.js"></script>
		<link rel="stylesheet" href="../css/estilos.css"/>
		<link rel="stylesheet" href="../css/formulario.css"/>
	</head>
	<body onload="calendario()">
		<div class="container">
			<div class="box box1"></div>
			<div class="box box2">
				<header>
					<nav>
						<ul class="ul_nav">
							<li><a href="../index.html">HOME</a></li>
							<li><a href="./utilidades.html">Utilidades</a></li>
							<li><a href="./otro.html">Otro</a></li>
							<li><a href="#">Login/Reg</a></li>
							<li><a href="./mas.html">Más</a></li>
						</ul>
					</nav>
				</header>
			</div>
			<div class="box box3">
				<div class="fecha ano" id="year"></div>
				<div class="fecha dia" id="day"></div>
				<div class="fecha mes" id="month"></div>
			</div>
			<div class="box box4" id="menIzq"></div>
			<div class="box box5" id="contenido">
				<div class="cont-formulario">
					<div class="toggle">
						<span> Crear Cuenta</span>
					</div>
					<div class="formulario">
						<h2 class="sesion">Iniciar Sesion</h2>
						<form id="log" class="" method="GET" onsubmit="return compr()">
							<input type="text" id="nombre" name="nombre" placeholder="Nombre..."/>
							<label for="nombre" id="labNombre"></label>
							<input type="password" id="pass" class="" name="pass" placeholder="Contraseña..."/>
							<label for="pass" id="labPass"></label>
							<input onclick="compr();" type="submit" value="Entrar"/>
						</form>
					</div>
					<div class="formulario">
						<h2 class="sesion">Crea tu Cuenta</h2>
						<form method="GET" onsubmit="return valRegistro()">
							<input type="text" id="nom" name="nom" placeholder="Nombre..." required/>
							<input type="text" id="apellido" name="apellido" placeholder="Apellido..." required/>
							<input type="email" id="email" name="email" placeholder="Email..." required/>
							<input type="password" id="passw" name="passw" placeholder="Contraseña..." required/>
							<input type="password" id="reppassw" name="reppassw" placeholder="Repetir contraseña..." required/>
							<input type="submit" onclick="valRegistro();" value="Registrarse"/>
						</form>
					</div>
					<div class="reset-password">
						<a href="#" onclick="users();">Olvide mi Contraseña?</a>
					</div>
				</div>
            </div>
			<div class="box">Menu lateral derecho</div>
			<div class="box box7"></div>
			<div class="box box8">
				<ul class="liPiePag">
					<li>Asociación/Clube/Empresa</li>
					<li>Web desarrollada por: Julio Pillado Castillo</li>
					<li><a href="" onclick="avisoLegal();">Aviso legal</a></li>
				</ul>
			</div>
			<div class="box box9"></div>
		</div>

		<script src="../js/jqueryv-3.4.1.min.js"></script>
		<script src="../js/min.js"></script>
	</body>
</html>

2 respuestas 2

4

Tu problema está en este selector de css:

input[type=text] {
    ...
    padding: 10px 15px;
    ...
}

input[type=password]{
    ...
    padding: 10px 15px;
    ...
}

Para solucionarlo quítale el padding de los laterales al input:

input[type=text] {
    padding: 10px 0px;
}

Snippet:

/*CSS del formulario, este css contiene los estilos del formulario  */

/* FORMULARIOS */

.cont-formulario{
    position: relative;
    width: 60%;
    margin: auto;
}

.sesion{
    padding-top: 20px;
}

input[type=text] {
    outline: none;
    background: rgba(0, 0, 0, .5);
    display: block;
    width: 100%;
    padding: 10px 0px;
    color: #fff;
    border: none;
    border-radius: 2px;
    border-bottom: 4px solid #ff851b;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 20px 0;
    transition: all .5s ease;
}

input[type=password] {
    outline: none;
    background: rgba(0, 0, 0, .5);
    display: block;
    width: 100%;
    padding: 10px 0px;
    color: #fff;
    border: none;
    border-radius: 2px;
    border-bottom: 4px solid #ff851b;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 20px 0;
    transition: all .5s ease;
}

input[type=email] {
    outline: none;
    background: rgba(0, 0, 0, .5);
    display: block;
    width: 100%;
    padding: 10px 15px;
    color: #fff;
    border: none;
    border-radius: 2px;
    border-bottom: 4px solid #ff851b;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 20px 0;
    transition: all .5s ease;
}

input[type=number] {
    outline: none;
    background: rgba(0, 0, 0, .5);
    display: block;
    width: 100%;
    padding: 10px 15px;
    color: #fff;
    border: none;
    border-radius: 2px;
    border-bottom: 4px solid #ff851b;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 20px 0;
    transition: all .5s ease;
}
  
input[type=submit] {
    background: #ff851b;
    color: #fff;
    border: none;
    width: 100%;
    padding: 10px 0;
    font-weight: normal;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 1px;
    font-size: 16px;
    cursor: pointer;
    transition: all .5s ease;
}

input[type=text]:focus {
    border-bottom: 4px solid #0075d9;
}

input[type=password]:focus {
    border-bottom: 4px solid #0075d9;
}

input[type=email]:focus {
    border-bottom: 4px solid #0075d9;
}

input[type=number]:focus {
    border-bottom: 4px solid #0075d9;
}
  
input[type=submit]:hover {
    background: rgba(0, 117, 217, 0.7);
}

.negativo{
    border-color: red !important;
}
.positivo{
    border-color: green !important;
}

.toggle{
    position: absolute;
    top: 7px;
    right: 7px;
    width: 100px;
    font-size: 12px;
    line-height: 25px;
    text-align: center;
    border-top: 2px solid #ff851b;
    border-bottom: 2px solid #ff851b;
    transition: all .5s ease;
    cursor: pointer;
}

.toggle span{
    letter-spacing: 1px;
}

.toggle:hover{
    border-top: 2px solid #0075d9;
    border-bottom: 2px solid #0075d9;
}

.box5 h2{
    margin: 0 0 28px 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.reset-password{
    background: rgba(0, 117, 217, 0.7);
    color: #fff;
    width: 100%;
    padding: 15px 0;
    text-align: center;
}

.reset-password a{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

.box5 .formulario{
    padding-bottom: 40px;
    display: none;
}

.box5 .formulario:nth-child(2){
    display: block;
}

::-webkit-input-placeholder { color: #fff; } 
 
:-moz-placeholder { /* Firefox 18- */ color: #fff; } 
 
::-moz-placeholder { /* Firefox 19+ */ color: #fff; } 
 
:-ms-input-placeholder { color: #fff; }

:focus::-webkit-input-placeholder{color:transparent;}



/*---------- CSS GENERAL -----------*/
/*CSS general, aquí tengo el grid y otros que son comunes para todos los html*/


*{
    padding: 0px;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
}

/* CSS GRID */
.container{
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 0.2fr 3fr 0.25fr;
}

.box{
    background: slateblue;
    color: #fff;
    text-align: center;
}

.box4{
    background: midnightblue;
}

.box5{
    background: #fff;
    color: #000;
}

.box1, .box2, .box3{
    background: #000;
}

.box7, .box8, .box9{
    background: maroon;
}

/* MENU HEADER */
header{
    margin-top: 20px;
    width: 500px;
    background-color: #000;
}

ul, ol{
    list-style: none;
}

.ul_nav li a{
    background-color: #000;
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

.ul_nav li a:hover{
    background-color: #434343;
}

.ul_nav > li{
    float: left;
}

/* MENU LATERAL IZQUIERDO */

.menuIzquierdo{
    margin-top: 20px;
    margin-left: 20px;
    width: 75%;
    text-align: left;
}

.menuIzquierdo > li > a{
    padding: 10px;
    text-decoration: none;
    background: midnightblue;
    color: #fff;
    display: block;
}

.menuIzquierdo > li > a:hover{
    background: cornflowerblue;
}

/* FECHA */
.fecha{
    padding: 0px;
    margin: 0px;
    width: 125px;
    border-style: none;
    color: #fff;
}

.ano, .mes{
    font-size: .75em;
}

.ano{
    margin-top: 5px;
    background-color: darkgreen;
}

.dia{
    background-color: darkseagreen;
}

.mes{
    background-color: darkgreen;
}

/* PIE DE PAGINA */

.liPiePag{
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
}

.liPiePag li a{
    text-decoration: none;
    color: #fff;
}

.liPiePag li a:hover{
    color: #ff851b;
}
<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Eventos Deportivos</title>
		<meta charset="utf-8"/>
		<script src="../js/login.js"></script>
		<script src="../js/calendario.js"></script>
		<script src="../js/avLegal.js"></script>
		<script src="../js/reg.js"></script>
		<script src="../js/us.js"></script>
		<link rel="stylesheet" href="../css/estilos.css"/>
		<link rel="stylesheet" href="../css/formulario.css"/>
	</head>
	<body>
		<div class="container">
			<div class="box box1"></div>
			<div class="box box2">
				<header>
					<nav>
						<ul class="ul_nav">
							<li><a href="../index.html">HOME</a></li>
							<li><a href="./utilidades.html">Utilidades</a></li>
							<li><a href="./otro.html">Otro</a></li>
							<li><a href="#">Login/Reg</a></li>
							<li><a href="./mas.html">Más</a></li>
						</ul>
					</nav>
				</header>
			</div>
			<div class="box box3">
				<div class="fecha ano" id="year"></div>
				<div class="fecha dia" id="day"></div>
				<div class="fecha mes" id="month"></div>
			</div>
			<div class="box box4" id="menIzq"></div>
			<div class="box box5" id="contenido">
				<div class="cont-formulario">
					<div class="toggle">
						<span> Crear Cuenta</span>
					</div>
					<div class="formulario">
						<h2 class="sesion">Iniciar Sesion</h2>
						<form id="log" class="" method="GET" onsubmit="return compr()">
							<input type="text" id="nombre" name="nombre" placeholder="Nombre..."/>
							<label for="nombre" id="labNombre"></label>
							<input type="password" id="pass" class="" name="pass" placeholder="Contraseña..."/>
							<label for="pass" id="labPass"></label>
							<input onclick="compr();" type="submit" value="Entrar"/>
						</form>
					</div>
					<div class="formulario">
						<h2 class="sesion">Crea tu Cuenta</h2>
						<form method="GET" onsubmit="return valRegistro()">
							<input type="text" id="nom" name="nom" placeholder="Nombre..." required/>
							<input type="text" id="apellido" name="apellido" placeholder="Apellido..." required/>
							<input type="email" id="email" name="email" placeholder="Email..." required/>
							<input type="password" id="passw" name="passw" placeholder="Contraseña..." required/>
							<input type="password" id="reppassw" name="reppassw" placeholder="Repetir contraseña..." required/>
							<input type="submit" onclick="valRegistro();" value="Registrarse"/>
						</form>
					</div>
					<div class="reset-password">
						<a href="#" onclick="users();">Olvide mi Contraseña?</a>
					</div>
				</div>
            </div>
			<div class="box">Menu lateral derecho</div>
			<div class="box box7"></div>
			<div class="box box8">
				<ul class="liPiePag">
					<li>Asociación/Clube/Empresa</li>
					<li>Web desarrollada por: Julio Pillado Castillo</li>
					<li><a href="" onclick="avisoLegal();">Aviso legal</a></li>
				</ul>
			</div>
			<div class="box box9"></div>
		</div>

		<script src="../js/jqueryv-3.4.1.min.js"></script>
		<script src="../js/min.js"></script>
	</body>
</html>

1
  • 1
    Muchas gracias @x3k_js. Ya probé a cambiar el padding de los laterales tal y como sugeriste y se soluciono el problema
    – JPillado
    el 12 dic. 2019 a las 15:47
3

La respuesta que te da el compañero en es perfectamente válida en su primera opción, necesitas darle las mismas características a través del css para que puedan comportarse del mismo modo a los input text e input password que al input submit. Pero supongo que al probar esta opción te has dado cuanta de que el placeholder se te coloca pegado a la izquierda y no quieres este efecto es por este motivo que que debes añair en tu css lo siguiente:

input[type=text] {
    padding: 10px 0;
}

input[type=password]{
    padding: 10px 0;
}

input[type=text]::-webkit-input-placeholder { /* WebKit browsers */
    padding-left:15px;
}
input[type=text]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   padding-left:15px;
   opacity:  1;
}
input[type=text]::-moz-placeholder { /* Mozilla Firefox 19+ */
   padding-left:15px;
   opacity:  1;
}
input[type=text]:-ms-input-placeholder { /* Internet Explorer 10+ */
   padding-left:15px
} 

input[type=password]::-webkit-input-placeholder { /* WebKit browsers */
    padding-left:15px;
}
input[type=password]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   padding-left:15px;
   opacity:  1;
}
input[type=password]::-moz-placeholder { /* Mozilla Firefox 19+ */
   padding-left:15px;
   opacity:  1;
}
input[type=password]:-ms-input-placeholder { /* Internet Explorer 10+ */
   padding-left:15px
} 
1
  • 1
    Al hacer el cambio sugerido por @x3k_js tuve darle el padding-left:15px; para que no quedase el placeholder pegado a la izquierda. Gracias @JorgeGuz
    – JPillado
    el 12 dic. 2019 a las 15:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.