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>