Skip to content

Instantly share code, notes, and snippets.

@StefCoders

StefCoders/fancy-forms.markdown

Created January 31, 2023 21:16
Show Gist options
  • Save StefCoders/21206535ae8aa72773e83861b57aba08 to your computer and use it in GitHub Desktop.
Save StefCoders/21206535ae8aa72773e83861b57aba08 to your computer and use it in GitHub Desktop.
Download ZIP
Fancy Forms
Raw
fancy-forms.markdown
Raw
index.html
<div class="middle">
<h1>Fancy Forms</h1>
<!-- Fancy inputs -->
<div id="fancy-inputs">
<label class="input">
<input type="text">
<span><span>Username</span></span>
</label>
<label class="input">
<input type="text">
<span><span>Password</span></span>
</label>
</div>
<div id="fancy-radio">
<input type="radio" name="group" id="questions" class="pull-left" style="display: none;">
<label class="radio questions" for="questions">Male</label>
<input type="radio" name="group" id="photo" class="pull-left" style="display: none;">
<label class="radio photo" for="photo">Female</label>
</div>
<a href="" class="btn">Sign Up</a>
</div>
Raw
script.js
// Inputs
$('#fancy-inputs input[type="text"]').blur(function(){
if($(this).val().length > 0){
$(this).addClass('white');
} else {
$(this).removeClass('white');
}
});
// Radios
$("#fancy-radio input[type=radio]").click(function() {
$('label.radio').removeClass('selected');
var inputID = $(this).attr('id');
if ($(this).is(':checked')) {
$('.' + inputID).addClass('selected');
} else {
$('.' + inputID).removeClass('selected');
}
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.scss
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #E74C3C;
}
// Layout
.middle{
width: 460px;
margin: 0 auto;
}
// Fonts
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
h1{
margin: 50px 0 0 0;
color: #fff;
font-family: 'Indie Flower', cursive;
font-size: 48px;
font-weight: normal;
text-align: center;
}
// Fancy inputs
#fancy-inputs{
float: left;
width: 100%;
margin: 0 0 50px 0;
label.input{
float: left;
width: 460px;
height: 42px;
margin: 50px 0 0 0;
position: relative;
clear: both;
span{
width: 100%;
height: 40px;
line-height: 40px;
position: absolute;
left: 0;
cursor: text;
span{
position: absolute;
top: 0;
z-index: 1;
font-family: 'Indie Flower', cursive;
font-size: 22px;
color: #fff;
text-indent: 10px;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
&:before{
content: '';
width: 0%;
height: 3px;
background-color: #2C3E50;
position: absolute;
bottom: 0;
left: 0;
z-index: 99;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
&:after{
content: '';
width: 0%;
height: 3px;
background-color: #2C3E50;
position: absolute;
bottom: 0;
right: 0;
z-index: 99;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
}
}
input{
float: left;
width: 460px;
height: 40px;
padding: 0 10px;
border: 0;
border-bottom: 3px solid #fff;
background-color: transparent;
color: #fff;
font-family: 'Indie Flower', cursive;
font-size: 22px;
position: relative;
z-index: 99;
&:focus{
outline: 0;
}
&.white{
background-color: #E74C3C;
}
}
input:focus + span{
span{
cursor: initial;
position: absolute;
top: -35px;
color: #2C3E50;
}
&:before{
width: 50%;
}
&:after{
width: 50%;
}
}
span.fixed{
span{
top: -35px;
}
}
}
// Fancy radio btns
#fancy-radio{
float: left;
width: 100%;
margin: 0 0 30px 0;
label.radio{
float: left;
width: auto;
line-height: 30px;
margin: 0 0 10px 0;
color: #fff;
font-family: 'Indie Flower', cursive;
font-size: 22px;
cursor: pointer;
position: relative;
clear: both;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
&:before{
content: '';
float: left;
width: 29px;
height: 29px;
margin: 0 5px 0 0;
background-color: #fff;
border-radius: 100%;
font-size: 22px;
text-indent: 40px;
}
&:after{
content: '';
width: 5px;
height: 5px;
background-color: #2C3E50;
border-radius: 100%;
position: absolute;
top: 12px;
left: 12px;
opacity: 0;
transition: 0.2s;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
}
&.selected{
&:after{
width: 15.5px;
height: 15.5px;
top: 7px;
left: 7px;
opacity: 1;
}
}
&:hover{
text-indent: 5px;
}
}
}
// Buttons
.btn{
float: left;
width: 100%;
height: 50px;
line-height: 50px;
margin: 0 0 50px 0;
background-color: #2C3E50;
color: #fff;
font-family: 'Indie Flower', cursive;
font-size: 22px;
text-decoration: none;
text-align: center;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
&:hover{
background-color: #374b60;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment