I'm doing a "project" for class and when applying some styles to the form, those input
of this have 100% of width
the div
one that contains it, I'm trying to make input
them occupy the same width as the Enter, Register and Forget my Password buttons ?. Below is the css and 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>
Your problem is in this selector
css
:To solve it, remove the one
padding
on the sides toinput
:Snippet:
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
einput password
que alinput submit
. Pero supongo que al probar esta opción te has dado cuanta de que elplaceholder
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: