So I'm trying to make a dropdown list overlap the elements below when expanded. Unfortunately, even when elements in the same stacking context have a position, and dropdown container div set to a z-index of 2, the issue still persists; instead of overlapping the elements below, it shifts them down. I have also attempted shuffling around the stacking context by adding the opacity property to various elements, but that hasn't worked either. The code can be seen below:
#firstone {
z-index: 2;
}
#contain {
height: 400px;
width: 400px;
background-color: rgba(100, 25, 25, 0.2);
}
body {
text-align: center;
}
input:focus {
outline: none;
}
.fancy_input_box {
text-align: left;
display: inline-block;
margin: 40px 3% 1px;
position: relative;
}
.fancy_input {
font: 15px/24px "Lato", Arial, sans-serif;
color: #aaa;
box-sizing: border-box;
letter-spacing: 1px;
border: 0;
padding: 7px 7px;
border: 1px solid #ccc;
position: relative;
background: transparent;
}
.fancy_input:focus~.dropdown-content {
display: block;
cursor: default;
}
.fancy_input:focus~.dropdown-content>span {
display: block;
cursor: default;
}
.dropdown-content {
display: none;
background-color: rgba(0, 0, 0, 0.2);
width: 222px;
overflow: auto;
position: relative;
}
.dropdown-content:active {
display: block;
}
.dropdown-content>span {
padding: 12px 16px;
display: none;
}
.dropdown-content>span:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.fancy_input~.fancy_label {
position: absolute;
left: 14px;
width: 100%;
top: 10px;
color: #aaa;
letter-spacing: 0.5px;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
z-index: -1;
}
.fancy_input:focus~.fancy_label {
top: -18px;
left: 1px;
font-size: 12px;
color: grey !important;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
.fancy_input:focus {
border: 1px solid grey !important;
}
.fancy_input:not(focus):valid~.fancy_label {
top: -18px;
font-size: 12px;
left: 1px;
color: #aaa;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="contain">
<div id="firstone" class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="25" size="25" required>
<label class="fancy_label">Search</label>
<div class="dropdown-content">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
</div>
</div>
<div class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="4" size="10">
<label class="fancy_label">Thing</label>
</div>
<br>
<div>
<div class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="4" size="10">
<label class="fancy_label">stuff</label>
</div>
<div class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="4" size="10">
<label class="fancy_label">more stuff</label>
</div>
<div class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="4" size="10">
<label class="fancy_label">more stuff</label>
</div>
</div>
</div>
</body>
</html>
You dropdown content should be absolute positioned.
Update your dropdown styles as shown below :
.dropdown-content {
display: none;
background-color: rgba(0, 0, 0, 0.2);
width: 222px;
overflow: auto;
position: absolute;
left: 0;
top: 100%;
}
Try following code just set position absolute. also i change width 100% in dropdown-content div for good design.
#firstone {
z-index: 2;
}
#contain {
height: 400px;
width: 400px;
background-color: rgba(100, 25, 25, 0.2);
}
body {
text-align: center;
}
input:focus {
outline: none;
}
.fancy_input_box {
text-align: left;
display: inline-block;
margin: 40px 3% 1px;
position: relative;
}
.fancy_input {
font: 15px/24px "Lato", Arial, sans-serif;
color: #aaa;
box-sizing: border-box;
letter-spacing: 1px;
border: 0;
padding: 7px 7px;
border: 1px solid #ccc;
position: relative;
background: transparent;
}
.fancy_input:focus~.dropdown-content {
display: block;
cursor: default;
}
.fancy_input:focus~.dropdown-content>span {
display: block;
cursor: default;
}
.dropdown-content {
display: none;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
overflow: auto;
position: absolute;
}
.dropdown-content:active {
display: block;
}
.dropdown-content>span {
padding: 12px 16px;
display: none;
}
.dropdown-content>span:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.fancy_input~.fancy_label {
position: absolute;
left: 14px;
width: 100%;
top: 10px;
color: #aaa;
letter-spacing: 0.5px;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
z-index: -1;
}
.fancy_input:focus~.fancy_label {
top: -18px;
left: 1px;
font-size: 12px;
color: grey !important;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
.fancy_input:focus {
border: 1px solid grey !important;
}
.fancy_input:not(focus):valid~.fancy_label {
top: -18px;
font-size: 12px;
left: 1px;
color: #aaa;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
<div id="contain">
<div id="firstone" class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="25" size="25" required>
<label class="fancy_label">Search</label>
<div class="dropdown-content">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
</div>
</div>
<div class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="4" size="10">
<label class="fancy_label">Thing</label>
</div>
<br>
<div>
<div class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="4" size="10">
<label class="fancy_label">stuff</label>
</div>
<div class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="4" size="10">
<label class="fancy_label">more stuff</label>
</div>
<div class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="4" size="10">
<label class="fancy_label">more stuff</label>
</div>
</div>
</div>
just add position:absoute and top:100%; in your dropdown-content class
jsfiddle from your code
.dropdown-content {
display: none;
background-color: rgba(0, 0, 0, 0.2);
width: 222px;
overflow: auto;
position: absolute;
left: 0;
top: 100%;
}
Related
How do I display "Confirm Password" in a single line ?
I add an <span id="confirm">Confirm Password</span> and I did this, doesn't work:
#confirm {
display: inline;
}
* {
margin: 0px;
padding: 0px;
}
body {
background-color: Royalblue; /*#f0f0f0;*/
}
.head {
text-align: center;
border: 1px solid #B0C4DE;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
background: rgba(0, 250, 0, 0);
color: #FFFACD;
font-family: 'Cinzel', sans-serif;
font-size:30px;
}
.content {
position:relative;
top:8px;
width: 30%;
margin: 50px
auto 0px;
}
form {
position: relative;
margin-top: 0;
margin-left: 0;
width: 89%;
height: 300px;
padding: 20px;
border: 1px solid #B0C4DE;
background: rgba(0, 250, 0, 0);
border-radius: 0px 0px 10px 10px;
}
label {
position: relative;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
z-index: -1;
border: 0;
color: white;
left: -65%;
top: -30px;
}
.username {
position: relative;
top: 65px;
}
.password {
position: relative;
top: 130px;
}
.con-pass {
position: relative;
top: 195px;
}
#confirm {
display: inline;
}
input {
position: absolute;
font-family: 'Montserrat', sans-serif;
border: 0;
border-bottom: 2px solid beige;
background: transparent;
font-size: 15px; /*BORDER yes/no*/
height: 25px;
width: 250px;
outline: 0;
z-index: 1;
left: -74px;
top: -30px;
}
span {
position: absolute;
top: 5px;
left: -6px;
transition: top .5s ease, font-size .5s ease;
}
input:focus + label > span,
input:valid + label > span {
top: -20px;
font-size: 11px;
/* padding-bottom: 15px;*/
}
label::after {
content: '';
position: absolute;
top: 27px; /* ::after position */
left: -7px;
width: 250px;
height: 23px;
border-radius: 2px;
transition: transform .3s;
}
label::after {
z-index: -1;
background: beige; /*#a86bf;*/
transform: scale3d(1, 0, 1);
transform-origin: top;
}
input:focus + label::after,
input:valid + label::after {
transform: scale3d(1, -1.3, 1);
transition-timing-function: linear;
top: 27px; /* ::after position */
}
input:focus {
border-radius: 2px;
}
<div class="content">
<p class="head">Register</p>
<form>
<div class="content">
<div class="email">
<input type="text" id="email" required /> <!--input field-->
<label for="email"><span>Email</span></label>
</div>
<div class="username">
<input type="text" id="user" required />
<label for="user"><span>Username</span></label>
</div>
<div class="password">
<input type="text" id="pass" required /> <!--input field-->
<label for="pass"><span>Password</span></label>
</div>
<div class="con-pass">
<input type="text" id="c-pass" required />
<label for="c-pass"><span id="confirm">Confirm Password</span></label>
</div>
</div>
</form>
</div>
You can use white-space: nowrap; for that :
#confirm {
white-space: nowrap;
}
Here is a resource for the white-space property in CSS.
Use white-space: nowrap; for class con-pass
You can also insert a in your html. That will ensure the two Words are kept on the same line:
<label for="c-pass"><span id="confirm">Confirm Password</span></label>
I Googled for the above mentioned problem, but I still require the help from the stack overflow community.
In my login form, I am using font awesome icon. I have 2 input boxes for username and password respectively.
I want to display fa-user-cirle icon on top of the username input. The login form is displayed in a div as follows:
<div class="loginDiv">
<form>
<i class="fa fa-user-circle"></i>
<div class="container">
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required>
<button mat-button (click)="submit()">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</div>
The CSS for icon is:
#import '~#angular/material/theming';
#include mat-core();
$yaana-app-primary: mat-palette($mat-orange, 800,400,200);
.firstDiv {
height: 40%;
width: 100%;
top: 0;
left: 0;
right: 0;
position: absolute;
background-color: orangered;
display: inline-block;
}
.secondDiv {
position: absolute;
width: 100%;
bottom: 0;
height: 60%;
left: 0;
right: 0;
background-color:whitesmoke;
display: inline-block;
}
.loginDiv {
border: 1px solid black;
background: white;
left: 50%;
position: absolute;
top: 28%;
transform: translate(-50%);
background-color: #fff;
padding: 15px;
box-shadow:1px 3px 10px rgba(0, 0, 0, 0.34);
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
width: 215px;
height: 36px;
line-height: 36px;
background: transparent;
border-radius: 3px;
will-change: transform;
-webkit-transition: all .2s ease;
transition: all .2s ease;
border: none;
/*border: 2px solid #FF5126;*/
cursor: pointer;
background: #F26722;
font-size: 16px;
color: #fff;
outline: none;
text-align: center;
padding: 0 6px;
margin: 6px 8px;
font-size: 14px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
text-transform: uppercase !important;
}
button:hover {
opacity: 0.8;
}
.loginImgContainer {
display: table;
max-height: 40px;
max-width: 40px;
}
i.fa {
background: #fff;
display: inline-block;
transform: scale(4,4);
border-radius: 50%;
}
The output I am getting is as follows:
But I want the icon to appear just above the username input and at the centre.
Please help me.
Adding this 'centericon' Class and css
.centericon{
font-size:36px;
position:absolute;
top:-18px;
left:50%;
transform:translate(-50%,0);
z-index:99;
background:white;
}
.firstDiv {
height: 40%;
width: 100%;
top: 0;
left: 0;
right: 0;
position: absolute;
background-color: orangered;
display: inline-block;
}
.secondDiv {
position: absolute;
width: 100%;
bottom: 0;
height: 60%;
left: 0;
right: 0;
background-color:whitesmoke;
display: inline-block;
}
.loginDiv {
border: 1px solid black;
background: white;
left: 50%;
position: absolute;
top: 28%;
transform: translate(-50%);
background-color: #fff;
padding: 15px;
box-shadow:1px 3px 10px rgba(0, 0, 0, 0.34);
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
width: 215px;
height: 36px;
line-height: 36px;
background: transparent;
border-radius: 3px;
will-change: transform;
-webkit-transition: all .2s ease;
transition: all .2s ease;
border: none;
/*border: 2px solid #FF5126;*/
cursor: pointer;
background: #F26722;
font-size: 16px;
color: #fff;
outline: none;
text-align: center;
padding: 0 6px;
margin: 6px 8px;
font-size: 14px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
text-transform: uppercase !important;
}
button:hover {
opacity: 0.8;
}
.loginImgContainer {
display: table;
max-height: 40px;
max-width: 40px;
}
.centericon{
font-size:36px;
position:absolute;
top:-18px;
left:50%;
transform:translate(-50%,0);
z-index:99;
background:white;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<div class="loginDiv">
<form>
<div class="centericon">
<i class="fa fa-user-circle"></i>
</div>
<div class="container">
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required>
<button mat-button (click)="submit()">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</div>
Try with adding row above the container,
<div class="loginDiv">
<form>
<div class="row center">
<i class="fa fa-user-circle"></i>
</div>
<div class="container">
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required>
<button mat-button (click)="submit()">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</div>
Thanks for giving me hint and found out the solution with following changes in css,
i.fa {
background: #fff;
display: inline-block;
font-size: 80px;
transform: translateY(-60%);
transform: translateX(160%);
border-radius: 50%;
}
I want the color of the border-bottom of my input to change with an animation when clicked. Similar to the yellow line one this. I want this to be on all the input boxes and the select.
.input_container{
display: inline-block;
text-align: center;
}
.awsome_input{
padding: 5px 10px;
border: none;
background: transparent;
display: block;
}
.awsome_input_border{
display:inline-block;
width:0px;
height: 2px;
background: #FEC938;
position: relative;
top:-5px;
-webkit-transition: all ease-in-out .15s;
-o-transition: all ease-in-out .15s;
transition: all ease-in-out .15s;
}
.awsome_input:hover,
.awsome_input:active,
.awsome_input:focus{
outline: none;
}
.awsome_input:hover+.awsome_input_border,
.awsome_input:active+.awsome_input_border,
.awsome_input:focus+.awsome_input_border{
width:100%;
}
<div class="input_container">
<input type="text" class="awsome_input"
placeholder="What do you think?"/>
<span class="awsome_input_border"/>
</div>
I've tried to recreate this in my code but I cant seem to get it right. Any idea how to do this?
I understand that the span is what creates the yellow line on the snippet but can I recreate this instead to change the border-color instead of adding another line.
My code.
<!DOCTYPE html>
<html>
<head>
<title>form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="signup-form">
<form>
<input type="text" name="firstname" class="line-animation">
<span class="awsome_input_border" />
<input type="text" name="lastname" class="line-animation">
<span class="awsome_input_border" />
<select name="country">
<option value="sweden">Sweden</option>
<option value="uk">United Kingdom</option>
<option value="us">United States</option>
<option value="canada">Canada</option>
</select>
<span class="awsome_input_border" />
</form>
</div>
</body>
</html>
.signup-form {
background-color: #efefef;
width: 50%;
}
.signup-form form {
padding: 20px 10px
}
.signup-form input[type=text], select {
border: none;
border-bottom: 2px solid darkgrey;
background-color: inherit;
margin-right: 20px;
}
.signup-form input[type=text]:focus, select:focus {
outline: none;
border-bottom: 2px solid #02add7;
}
Well the clue was in the code you provided at the beginning, you need to set what happens to the sibling element on focus:
HTML
<!DOCTYPE html>
<html>
<head>
<title>form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="signup-form">
<form>
<div class="form-group">
<input type="text" name="firstname" class="line-animation" placeholder="firstname">
<div class="line"></div>
</div>
<div class="form-group">
<input type="text" name="lastname" class="line-animation" placeholder="lastname"><div class="line"></div>
</div>
<div class="form-group">
<select name="country">
<option value="sweden">Sweden</option>
<option value="uk">United Kingdom</option>
<option value="us">United States</option>
<option value="canada">Canada</option>
</select><div class="line"></div>
</div>
</form>
</div>
</body>
</html>
CSS
.signup-form {
background-color: #efefef;
width: 50%;
}
.signup-form form {
padding: 20px 10px
}
.signup-form input[type=text], select {
border: none;
border-bottom: 2px solid darkgrey;
background-color: inherit;
display: block;
width: 100%;
margin: none;
}
.signup-form input[type=text]:focus, select:focus {
outline: none;
}
.form-group {
text-align: center;
}
.form-group .line {
height: 2px;
width: 0px;
position: absolute;
background-color: darkgrey;
display: inline-block;
transition: .3s width ease-in-out;
position: relative;
top: -14px;
}
.signup-form input[type=text]:focus+.line, select:focus+.line {
width: 100%;
background-color: #02add7;
}
Fiddle: https://jsfiddle.net/6xjyw21m/
Try this simple example. I am not using any span and only using border css
input {
border: none;
padding-bottom: 5px;
transition: 0.2s ease all;
}
input:focus{
outline: none;
border-bottom: 2px solid yellow;
}
input:hover {
border-bottom: 2px solid yellow;
}
select {
border: none;
background-color: white;
}
select:hover {
border-bottom: 2px solid yellow;
}
select:focus{
outline: none;
}
<h3>INPUT</h3>
<input type="text" placeholder="What do you think?" />
<h3>SELECT</h3>
<select name="country">
<option value="sweden">Sweden</option>
<option value="uk">United Kingdom</option>
<option value="us">United States</option>
<option value="canada">Canada</option>
</select>
Please check the below sample
body {
background: #ccc;
}
.custom-form {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 16px;
max-width: 360px;
margin: 40px auto 40px;
background: #fff;
padding: 40px;
border-radius: 4px;
}
.custom-form .btn-primary {
background-color: #8e44ad;
border-color: #8e44ad;
}
.custom-form .form-group {
position: relative;
padding-top: 16px;
margin-bottom: 16px;
}
.custom-form .form-group .animated-label {
position: absolute;
top: 20px;
left: 0;
bottom: 0;
z-index: 2;
width: 100%;
font-weight: 300;
opacity: 0.5;
cursor: text;
transition: 0.2s ease all;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.custom-form .form-group .animated-label:after {
content: '';
position: absolute;
bottom: 0;
left: 45%;
height: 2px;
width: 10px;
visibility: hidden;
background-color: #8e44ad;
transition: 0.2s ease all;
}
.custom-form .form-group.not-empty .animated-label {
top: 0;
font-size: 12px;
}
.custom-form .form-group .form-control {
position: relative;
z-index: 1;
border-radius: 0;
border-width: 0 0 1px;
border-bottom-color: rgba(0, 0, 0, 0.25);
height: auto;
padding: 3px 0 5px;
}
.custom-form .form-group .form-control:focus {
box-shadow: none;
border-bottom-color: rgba(0, 0, 0, 0.12);
}
.custom-form .form-group .form-control:focus ~ .animated-label {
top: 0;
opacity: 1;
color: #8e44ad;
font-size: 12px;
}
.custom-form .form-group .form-control:focus ~ .animated-label:after {
visibility: visible;
width: 100%;
left: 0;
}
<div>
<div>
<form action="#" class="custom-form">
<h3 class="text-center">Animated Form</h3>
<div class="form-group" ng-class="{'not-empty': userName.length}">
<input type="text" class="form-control" name="user" id="user" ng-model="userName"/>
<label for="user" class="animated-label">Username</label>
</div>
<div class="form-group" ng-class="{'not-empty': passWord.length}">
<input type="password" class="form-control" name="pass" id="pass" ng-model="passWord"/>
<label for="pass" class="animated-label">Password</label>
</div>
<div class="submit">
<button class="btn btn-primary btn-block" disabled>Send</button>
</div>
</form>
</div>
</div>
How do you get an image to overlap to next div below it?
If you don't get my descriptions this is the feature I want.
click here
This is what I have so far
HTML:
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible. <img src="https://vetstreet.brightspotcdn.com/dims4/default/8fe930e/2147483647/crop/0x0%2B0%2B0/resize/645x380/quality/90/?url=https%3A%2F%2Fvetstreet-brightspot.s3.amazonaws.com%2F57%2Ff65100a80811e0a0d50050568d634f%2Ffile%2FStaffordshire-Bull-Terrier-3-645mk062811.jpg" alt="Image result for dogs staffordshire terrier"/></div>
CSS:
div.hidden {
background-color: #00FF00;
width: 100%;
height: 100px;
overflow: hidden;
}
This layout some thing like your screenshot , but you have to need better understand CSS positioning attribute. Please checkout........
html,
body {
width: 100%;
height: 100%;
margin: 0;
font-family: Helvetica, Arial, sans-serif;
overflow: hidden;
}
.ghost {
position: absolute;
left: -100%;
}
.framed {
position: absolute;
top: 50%;
left: 50%;
width: 15rem;
margin-left: -7.5rem;
}
.logo {
margin-top: -9em;
cursor: default;
}
.form {
margin-top: -4.5em;
transition: 1s ease-in-out;
}
.input {
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 1.125rem;
line-height: 3rem;
width: 100%;
height: 3rem;
color: #444;
background-color: rgba(255, 255, 255, .9);
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.7);
padding: 0 1rem;
font-family: 'Open Sans', sans-serif;
}
.input:focus {
outline: none;
}
.input--top {
border-radius: 0.5rem 0.5rem 0 0;
border-top: 0;
}
.input--submit {
background-color: rgba(92, 168, 214, 0.9);
color: #fff;
font-weight: bold;
cursor: pointer;
border-top: 0;
border-radius: 0 0 0.5rem 0.5rem;
margin-bottom: 1rem;
}
.text {
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
text-decoration: none;
}
.text--small {
opacity: 0.85;
font-size: 0.75rem;
cursor: pointer;
}
.text--small:hover {
opacity: 1;
}
.text--omega {
width: 200%;
margin: 0 0 1rem -50%;
font-size: 1.5rem;
line-height: 1.125;
font-weight: normal;
}
.text--centered {
display: block;
text-align: center;
}
.text--border-right {
border-right: 1px solid rgba(255, 255, 255, 0.5);
margin-right: 0.75rem;
padding-right: 0.75rem;
}
.legal {
position: absolute;
bottom: 1.125rem;
left: 1.125rem;
}
.photo-cred {
position: absolute;
right: 1.125rem;
bottom: 1.125rem;
}
.fullscreen-bg {
position: absolute;
height: 50vh;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(https://unsplash.it/1800/700?random.jpg) center;
background-size: cover;
}
#toggle--login:checked~.form--signup {
left: 200%;
visibility: hidden;
}
#toggle--signup:checked~.form--login {
left: -100%;
visibility: hidden;
}
#media (height:300px) {
.legal,
.photo-cred {
display: none
}
}
<input type="radio" checked id="toggle--login" name="toggle" class="ghost" />
<input type="radio" id="toggle--signup" name="toggle" class="ghost" />
<form class="form form--login framed">
<input type="email" placeholder="Email" class="input input--top" />
<input type="password" placeholder="Password" class="input" />
<input type="submit" value="Log in" class="input input--submit" />
<label for="toggle--signup" class="text text--small text--centered">New? <b>Sign up</b></label>
</form>
<form class="form form--signup framed">
<h2 class="text text--centered text--omega">Join the other <b>152.6 million</b> blogs and</br>share all that you love.</h2>
<input type="email" placeholder="Email" class="input input--top" />
<input type="password" placeholder="Password" class="input" />
<input type="text" placeholder="Username" class="input" />
<input type="submit" value="Sign up" class="input input--submit" />
<label for="toggle--login" class="text text--small text--centered">Not new? <b>Log in</b></label>
</form>
</div>
<div class="fullscreen-bg"></div>
I want to display the label of an input inside its input, so that when I click the input, the label will animate and go above the input and change the styles of the input's border.
Like so:
* {
margin: 0;
padding: 0;
}
form {
width: 100%;
max-width: 500px;
margin: 0 auto;
outline: 1px solid lightgrey;
padding: 10px;
}
label, input[type='text'], input[type='password'] {
font-size: 12pt;
padding: 8px;
}
label {
color: grey;
}
input {
border: none;
outline: none;
border-bottom: 1px solid grey;
}
<form>
<label for="username">Username</label>
<input id="username" name="username" type="text"/>
<br/>
<label for="password">Password</label>
<input id="password" name="password" type="password"/>
<br/>
<input type="submit" value"login"/>
</form>
How can I achieve this with CSS?
This looks a lot like the Google new material design inputs.
I created custom inputs for you that look like what you are looking for.
.input-group {
position: relative;
margin: 40px 0 20px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
}
input:focus {
outline: none;
}
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
input:focus ~ label,
input:valid ~ label {
top: -20px;
font-size: 14px;
color: #4285f4;
}
.bar {
position: relative;
display:block;
width:315px;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4285f4;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before,
input:focus ~ .bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
input:focus ~ .highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* animations */
#-webkit-keyframes inputHighlighter {
from { background: #4285f4; }
to { width: 0; background: transparent; }
}
#-moz-keyframes inputHighlighter {
from { background: #4285f4; }
to { width: 0; background: transparent; }
}
#keyframes inputHighlighter {
from { background: #4285f4; }
to { width: 0; background: transparent; }
}
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Username</label>
</div>
<div class="input-group">
<input type="password" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Password</label>
</div>
Edited #23 Dec 2017
This will also help you. Considering your image i am asking you want to change text after click?
input {
margin: 40px 25px;
width: 200px;
display: block;
border: none;
padding: 10px 0;
border-bottom: solid 1px #1abc9c;
-webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
background-position: -200px 0;
background-size: 200px 100%;
background-repeat: no-repeat;
color: #0e6252;
}
input:focus, input:valid {
box-shadow: none;
outline: none;
background-position: 0 0;
}
input::-webkit-input-placeholder {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
color: #1abc9c;
font-size: 11px;
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
visibility: visible !important;
}
<input placeholder="Username" type="text" required>
<input placeholder="Password" type="password" required>
Check this Tutorial Link
Demo Link
This is inspired by latest Gmail Login style
HTML
<div class="form-wrapper-outer">
<div class="form-logo">
<img src="https://www.freakyjolly.com/wp-content/uploads/2017/08/cropped-fjlogo2.png" alt="logo">
</div>
<div class="form-greeting">
<span>It's nice to meet you.</span>
</div>
<div class="field-wrapper">
<input type="email" name="email" id="">
<div class="field-placeholder"><span>Enter your email</span></div>
</div>
<div class="field-wrapper">
<input type="password" name="password" id="">
<div class="field-placeholder"><span>Enter your password</span></div>
</div>
<div class="form-button">
<button type="button" class="btn btn-primary">Login</button>
</div>
</div>
CSS Style
.field-wrapper{
position: relative;
margin-bottom: 15px;
}
.field-wrapper input{
border: 1px solid #DADCE0;
padding: 15px;
border-radius: 4px;
width: 100%;
}
.field-wrapper input:focus{
border:1px solid #1A73E8;
}
.field-wrapper .field-placeholder{
font-size: 16px;
position: absolute;
/* background: #fff; */
bottom: 17px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #80868b;
left: 8px;
padding: 0 8px;
-webkit-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
z-index: 1;
text-align: left;
width: 100%;
}
.field-wrapper .field-placeholder span{
background: #ffffff;
padding: 0px 8px;
}
.field-wrapper input:not([disabled]):focus~.field-placeholder
{
color:#1A73E8;
}
.field-wrapper input:not([disabled]):focus~.field-placeholder,
.field-wrapper.hasValue input:not([disabled])~.field-placeholder
{
-webkit-transform: scale(.75) translateY(-39px) translateX(-60px);
transform: scale(.75) translateY(-39px) translateX(-60px);
}
jQuery Event Listener
$(".field-wrapper .field-placeholder").on("click", function () {
$(this).closest(".field-wrapper").find("input").focus();
});
$(".field-wrapper input").on("keyup", function () {
var value = $.trim($(this).val());
if (value) {
$(this).closest(".field-wrapper").addClass("hasValue");
} else {
$(this).closest(".field-wrapper").removeClass("hasValue");
}
});
I Hope this will also help you.
The input animation happens when we add required attribute in it, this can be done without adding required attribute also.
HTML
<div class="floating-label">
<input class="floating-input" type="text" placeholder=" ">
<label>Text</label>
</div>
<div class="floating-label">
<input class="floating-input" type="text" onclick="(this.type='time')" placeholder=" ">
<label>Time</label>
</div>
<div class="floating-label">
<input class="floating-input" type="text" onclick="(this.type='date')" placeholder=" ">
<label>Date</label>
</div>
<div class="floating-label">
<input class="floating-input" type="password" placeholder=" ">
<label>Password</label>
</div>
<div class="floating-label">
<select class="floating-select" onclick="this.setAttribute('value', this.value);" value="">
<option value=""></option>
<option value="1">Alabama</option>
<option value="2">Boston</option>
<option value="3">Ohaio</option>
<option value="4">New York</option>
<option value="5">Washington</option>
</select>
<label>Select</label>
</div>
<div class="floating-label">
<textarea class="floating-input floating-textarea" placeholder=" "></textarea>
<label>Textarea</label>
</div>
CSS
.floating-label {
position:relative;
margin-bottom:20px;
}
.floating-input , .floating-select {
font-size:14px;
padding:4px 4px;
display:block;
width:180px;
height:30px;
background-color: transparent;
border:none;
border-bottom:1px solid #757575;
}
.floating-input:focus , .floating-select:focus {
outline:none;
border-bottom:2px solid #5264AE;
}
label {
color:#999;
font-size:14px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:5px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label {
top:-18px;
font-size:14px;
color:#5264AE;
}
.floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label {
top:-18px;
font-size:14px;
color:#5264AE;
}
.floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {
width:50%;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.floating-textarea {
min-height: 30px;
max-height: 260px;
overflow:hidden;
overflow-x: hidden;
}
DEMO
Floating Label's - Pure CSS - without Required*
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
background: #fff;
padding: 40px;
border: 1px solid red;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.box input {
padding: 10px 0;
margin-bottom: 30px;
}
.box input {
width: 100%;
box-sizing: border-box;
box-shadow: none;
outline: none;
border: none;
border-bottom: 2px solid #999;
}
.box form div {
position: relative;
}
.box form div label {
position: absolute;
top: 10px;
left: 0;
color: #999;
transition: 0.5s;
pointer-events: none;
}
.box input:focus~label,
.box input:valid~label {
top: -12px;
left: 0;
color: red;
}
.box input:focus,
.box input:valid {
border-bottom: 2px solid red;
}
<div class="box">
<form>
<div>
<input type="text" name="" required="">
<label>First Name</label>
</div>
<div>
<input type="text" name="" required="">
<label>Last Name</label>
</div>
</form>
</div>
Like #daniel-j-abraham i use the input:not(:placeholder-shown) ~ label method. You just need to set a placeholder=" " (with a space) to your inputs (see this pen for live example)
it works just like the required method but it's way more convenient since it works also with non required fields.
i don't understand why this method isn't more used / upvoted ^^
CODE :
HTML :
<form class="contactForm">
<div>
<input id="contactName" value="" name="name" type="text" placeholder=" ">
<label for="contactName">name</label>
</div>
<div>
<input id="contactCompany" value="" name="company" type="text" placeholder=" ">
<label for="contactCompany">company</label>
</div>
<div>
<input id="contactPosition" value="" name="position" type="text" placeholder=" ">
<label for="contactPosition">position</label>
</div>
<div>
<button type="submit" class="submit">Send</button>
</form>
CSS:
/*basic styling */
.contactForm {
text-align: center;
margin: auto;
width: 300px;
padding-top: 15px
}
.contactForm > div {
position: relative;
width: 100%;
}
.contactForm > div input {
width: 100%;
height: 42px;
margin: 10px;
border: none;
border-bottom: 2px solid #eee;
border-left: 2px solid #eee;
padding: 0 10px;
transition: all .3s ease;
outline: none !important;
}
.contactForm > div label {
position: absolute;
top: 0;
left: 0;
margin: 20px;
transition: all .3s ease;
}
.contactForm > div input:focus {
border-color: #ff6291;
}
.contactForm > div input:not(:placeholder-shown) {
border-color: #26e9b9;
}
/* END of basic styling*/
/*************************************************/
/* NOW that's the part that interests us */
/*************************************************/
/* label goes up when input is focused OR filled */
.contactForm > div input:focus ~ label,
.contactForm > div input:not(:placeholder-shown) ~ label {
font-size: 12px;
transform: translateY(-30px);
}
/* label color on focused state */
.contactForm > div input:focus ~ label {
color: #ff6291;
}
/* label color on filled state */
.contactForm > div input:not(:placeholder-shown) ~ label {
color: #26e9b9;
}
/* button styling */
.submit {
color: #fff!important;
background-image: linear-gradient(to right,#ff017d 0,#ff7f78 40%,#fff 50%,#26e9b9 60%,#44c0ff 100%)!important;
background-size: 300% 200%!important;
background-position: -1px 0;
transition: background-position .3s;
border: none!important;
border-radius: 50px;
padding: 10px 42px;
text-transform: uppercase;
}
.submit:hover {
background-position: 95% 0 !important;
cursor: pointer;
}