Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sign-in/up/reset form
<div class="flex-wrap">
<fieldset>
<form action novalidate>
<input type="radio" name="rg" id="sign-in" checked/>
<input type="radio" name="rg" id="sign-up" />
<input type="radio" name="rg" id="reset" />
<label for="sign-in">Sign in</label>
<label for="sign-up">Sign up</label>
<label for="reset">Reset</label>
<input class="sign-up sign-in reset" type="email" placeholder="Email" />
<input class="sign-up sign-in" type="password" placeholder ="Password" />
<input class="sign-up" type="password" placeholder ="Repeat Password" />
<button>Submit</button>
<p>In response to <a href="https://codepen.io/IanHazelton/details/bgwEPa/" target="_blank">this pen</a></p>
</form>
</fieldset>
</div>
// colors
$color-body: #1abc9c;
$color-accent: #16a085;
$color-input: #fff;
// fix position radio input off-canvas
input[type="radio"] {
position: fixed;
left: -100px;
}
// style input fields (note hidden by default)
input:not([type="radio"]) {
appearance: none;
background-color: $color-input;
display: block;
transition: 300ms ease;
border-radius: 7px;
border: 0;
max-height: 0;
margin: 0;
padding: 0 10px;
overflow: hidden;
width: 250px;
opacity: 0;
font-size: 16px;
text-align: center;
outline: 0;
}
// show input based on radio selection
[id="sign-in"]:checked ~ input.sign-in,
[id="sign-up"]:checked ~ input.sign-up,
[id="reset"]:checked ~ input.reset {
max-height: 40px;
padding: 10px;
margin: 10px 0;
opacity: 1;
}
// submit button
button {
width: 250px;
height: 40px;
border-radius: 7px;
background-color: $color-accent;
font-size: 0;
&:before { font-size: 16px; }
}
// show botton text based on radio selection
[id="sign-in"]:checked ~ button:before { content: 'Sign In'; }
[id="sign-up"]:checked ~ button:before { content: 'Sign Up'; }
[id="reset"]:checked ~ button:before { content: 'Reset password'; }
//
label {
position: relative;
display: inline-block;
text-align: center;
font-weight: 700;
cursor: pointer;
color: $color-accent;
transition: 300ms ease;
width: calc(100% / 3 - 4px);
// pointer arrow
&:after {
content: '';
border: 10px solid transparent;
position: absolute;
bottom: -10px;
left: calc(50% - 10px);
transition: inherit;
}
}
// set active label marker
[id="sign-in"]:checked ~ [for="sign-in"],
[id="sign-up"]:checked ~ [for="sign-up"],
[id="reset"]:checked ~ [for="reset"] {
color: $color-input;
&:after {
border-bottom-color: $color-input;
}
}
// flex does not work well on fiedset
// why we use a styling wrapper
.flex-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 300px;
text-align: center;
}
body {
background-color: $color-body;
font-size: 16px;
}
<link href="https://codepen.io/IanHazelton/pen/RWXGep" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment