Sign-in/up/reset form

index.html

<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>

sign-in-up-reset-form.markdown

Sign-in/up/reset form

A Pen by jakob-e on CodePen.

License.

style.scss

// 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;
}

styles

<link href="https://codepen.io/IanHazelton/pen/RWXGep" rel="stylesheet" />