CSS Walk 8 Form formating
html file for the formulary
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Course</title>
</head>
<body>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" placeholder="introduzca su nombre" />
<label for="email">email:</label>
<input type="email" id="email" placeholder="introduzca su email" />
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" placeholder="introduzca su mensaje"></textarea>
<input type="submit" value="enviar" />
</form>
</body>
</html>
browser output:
With CSS let´s adjust their width and put inside a box, 30% of the width.
form {
width: 30%;
border: 1px solid rgb(0, 153, 255);
}
Adjust the space of the elements with margin and padding
form {
width: 30%;
border: 1px solid rgb(0, 153, 255);
margin: 20px;
}
form {
width: 30%;
border: 1px solid rgb(0, 153, 255);
margin: 20px;
padding: 20px;
}
To adjust the label and the input, change the width label to 100% and make it display: block;
form {
width: 30%;
border: 1px solid rgb(0, 153, 255);
margin: 20px;
padding: 20px;
}
label {
font-size: 12px;
display: block;
width: 100%;
}
Adjust the input elements to fill the horizontal at 100% and make a padding.
form {
width: 30%;
border: 1px solid rgb(0, 153, 255);
margin: 20px;
padding: 20px;
}
label {
font-size: 12px;
display: block;
width: 100%;
}
input,
textarea {
margin-bottom: 10px;
width: 100%;
padding: 10px;
}
The input elements with the padding outs the box so adjust with
input,
textarea {
margin-bottom: 10px;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
Let´s make a little adjust to the input with
border: 1px solid #aaa;
and set the border of color when focus on an input, adjust the textarea to only change the vertical size with min and max height.
form {
width: 30%;
border: 1px solid rgb(0, 153, 255);
margin: 20px;
padding: 20px;
}
label {
font-size: 12px;
display: block;
width: 100%;
}
input,
textarea {
margin-bottom: 10px;
width: 100%;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 2px solid #aaa;
}
input:focus,
textarea:focus {
border: 2px solid rgb(12, 156, 204);
}
textarea {
resize: vertical;
max-height: 150px;
min-height: 40px;
}
Adjust the input submit
input[type="submit"] {
margin-bottom: 0;
background: rgb(12, 156, 204);
border: none;
color: white;
}
input[type="submit"]:hover {
background: rgb(69, 189, 230);
cursor: pointer;
}
eot
No hay comentarios:
Publicar un comentario