Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save FWeinb/4f001f976af39124c301 to your computer and use it in GitHub Desktop.
Save FWeinb/4f001f976af39124c301 to your computer and use it in GitHub Desktop.
A Pen by Theodore Vorillas.

Fixed length password field concept.

Another small UI/UX experiment. Password fields are quite annoying to fill. In this concept I have visualised the required password's length using dashes.

A Pen by Theodore Vorillas on CodePen.

License.

<!-- Type abcd to unlock-->
<div class="clr"><small>Type 1234 to unlock</small></div>
<span><input type="password" maxlength="4"/></span>
$( document ).ready(function() {
$("input").focus();
$("input").on("keyup",function(){
if( $("input").val()=="1234"){
$("span").addClass("active")
}else{
$("span").removeClass("active");
}
})
});
@import "compass/css3";
body{
background-repeat: no-repeat;
background-attachment: fixed;
overflow: hidden;
display: block;
width: 100%;
height: 100%;
text-align: center;
font-weight: bold;
font-family:Arial, sans-serif;
font-smoothing: antialiased;
perspective: 700px;
transform-style: preserve-3d;
background-color: #ffffff;
@include filter-gradient(#ffffff, #eae0de, horizontal);
@include background-image(radial-gradient(center, ellipse cover, #ffffff 0%,#eae0de 100%));
}
.clr{
height: 1px; margin-top: 200px; clear: both; text-align: center; font-weight: 100; font-size: 12px; text-indent: -18px;color:#300031;
}
input{
position:relative;
top:50%;
border:0;
background:none;
font-size:60px;
line-height:30px;
width: 140px;
display: inline-block;
z-index:1000;
color:#300031;
&:focus{outline:none;}
}
span{
position:relative;
color:#DB3665;
margin-top:200px;
display:inline;
&:before,&:after{position:absolute;}
&:before{
content: "\f023";
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
left: -22px;
top: -13px;
font-size: 20px;
}
&:after{
content: "----";
top: -8px;
left: 4px;
width: 135px;
z-index: 100;
height: 10px;
font-size: 69px;
line-height: 0px;
letter-spacing: 10.7px;
text-align: left;
text-indent: 0;
color: #DB3665;
}
}
span.active{
color: #00700C;
&:before{content: "\f09c";}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment