CSS Walk Pseudo-classes Forms
Basic html file with form and input elements.
html file
<!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 Pseudoclases</title>
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=s/normalize"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/" />
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
</head>
<body>
<div class="container"></div>
<h1>Pseudo-classes Forms</h1>
<form class="formulary" >
<div class="group">
<label>:focus</label>
<input class="name" type="text" placeholder="Name" />
</div>
<div class="group">
<label>:disabled</label>
<input class="id" type="text" placeholder="Id: 1" disabled />
</div>
<div class="group">
<label>:valid | :invalid</label>
<input class="email" type="email" placeholder="email@email.com" value="fulano@email.com" required />
</div>
<div class="group">
<label>:required</label>
<input class="message" type="text" placeholder="Message" value="data of message" required
/>
</div>
<div class="group">
<label>:checked</label>
<div class="radio">
<label><input type="checkbox" id="terms" />Acept conditions and terms</label>
</div>
</div>
<div class="group">
<label>:default</label>
<div class="checkbox">
<label><input type="radio" name="option" id="1" value="1" />Option 1</label>
<label><input type="radio" name="option" id="2" value="2" checked />Option 2</label>
<label><input type="radio" name="option" id="3" value="3" />Option 3</label>
</div>
</div>
<div class="group">
<label>:in range</label>
<input
class="age" type="number" placeholder="099" min="1" max="100" value="1"/>
</div>
<button type="submit" class="button">Register</button>
</form>
</body>
</html>
with a very basic formating of css to start with.
css file
* {
box-sizing: border-box;
}
:root {
--backcolor: #fcf7f8;
--grey: #494d50;
--blue: #607eeb;
}
body {
background: var(--backcolor);
font-family: "Roboto", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 500px;
width: 90%;
padding: 0 30px;
border-radius: 20px;
}
.title {
font-size: 20px;
text-align: center;
text-transform: uppercase;
color: var(--grey);
margin-bottom: 20px;
}
browser output
Let´s format the group
.formulary .group {
margin-bottom: 60px;
}
adjusting the labels and inputs
.formulary .group .label {
display: block;
color: var( --darkcolor);
border-bottom: 5px;
font-size: 14px;
}
.formulary .group > input {
height: 50px;
width: 100%;
border-radius: 5px;
padding: 20px;
border: none;
border: 1px solid rgba(0,0,0,0.2);
}
browser output
Adjust the radio and checkbox
.formulary .group .radio input,
.formulary .group .checkbox input{
margin-right: 10px;
}
.formulary .group .checkbox label{
margin-right: 20px;
}
Now adjusting the button and only the first labels
.button {
width: 100%;
background: var(--blue);
display: inline-block;
padding: 25px;
cursor: pointer;
color: black;
text-transform: uppercase;
border-radius: 5px;
transition: .3s ease all;
border:none;
}
button:hover {
background: var(--bluesecond);
}
.formulary > div > label:first-of-type {
font-weight: bolder;
}
Pseudo Classes in Action
This pseudo-classes are relative to the actions over the input fields
/* ======= Pseudo Classes ========*/
.formulary .name:focus {
border: 5px solid var(--bluesecond);
}
.formulary .id:disabled {
background: var(--backcolor);
filter: opacity(50%);
}
.formulary .email:valid {
background: limegreen;
border: none;
}
.formulary .email:invalid {
background: rgb(238, 72, 72);
border: none;
}
.formulary .message:required {
background: rgb(253, 124, 17);
border: none;
}
.formulary .radio input:checked {
box-shadow: 0 0 10px 2px rgb(0, 110, 255);
}
.formulary .checkbox input:default {
box-shadow: 0 0 10px 2px rgb(117, 117, 117);
}
.formulary .age:in-range {
box-shadow: 0 0 10px 2px limegreen;
border: none;
}
.formulary .age:out-of-range {
background: rgb(238, 72, 72);
border: none;
}
eot
No hay comentarios:
Publicar un comentario