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>
Related
I had this piece of CSS implemented to have a transparent autofill background. But something has recently changed that it stopped working?
#-webkit-keyframes autofill {
to {
color: white;
background: transparent;
}
}
input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
Is there a fix to this?
form {
background-color: red;
}
div {
margin: 15px 0;
position: relative;
width: 360px;
color: red;
background-color: red;
}
textarea,
select,
input {
height: 30px;
line-height: 30px;
border-radius: 5px;
border: 1px solid #000;
width: 100%;
box-sizing: border-box;
padding: 0 10px;
color: red;
background-color: red;
}
textarea {
height: 200px;
color: red;
background-color: red;
}
textarea+label {
width: calc(100% - 2px) !important;
top: 1px;
box-sizing: border-box;
border-radius: 5px 5px 0 0;
text-align: center;
color: red;
}
textarea:invalid,
select:invalid,
input:invalid {
box-shadow: none;
color: red;
}
textarea:invalid+label,
select:invalid+label,
input:invalid+label {
padding: 0 10px;
max-width: 360px;
color: red;
}
textarea:focus+label,
select:focus+label,
input:focus+label,
label {
position: absolute;
background: #a4a290;
max-width: 0;
padding: 0;
overflow: hidden;
left: 1px;
top: 1px;
height: 28px;
font: 14px/28px sans-serif;
-webkit-transition: all 0.25s;
-o-transition: all 0.25s;
transition: all 0.25s;
color: red;
border-radius: 5px 0 0 5px;
}
textarea:focus+label {
height: 0;
color: red;
#-webkit-keyframes autofill {
to {
color: white;
background: transparent;
}
}
input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
<form>
<div>
<input type="text" id="firstname" required/>
<label for="firstname">First Name</label>
</div>
<div>
<input type="text" id="secondname" required/>
<label for="secondname">Second Name</label>
</div>
<div>
<select id="type" required>
<option value=""></option>
<option value="1">Type 1</option>
<option value="2">Type 2</option>
<option value="3">Type 3</option>
<option value="4">Type 4</option>
</select>
<label for="type">Select type...</label>
</div>
<div>
<textarea id="comment" required/></textarea>
<label for="comment">Comment</label>
</div>
</form>
Just this would do the job perfectly :
input:-webkit-autofill {
-webkit-text-fill-color: transparent;
transition: background-color 5000s ease-in-out 0s;
}
form {
background-color: red;
}
div {
margin: 15px 0;
position: relative;
width: 360px;
color: red;
background-color: red;
}
textarea,
select,
input {
height: 30px;
line-height: 30px;
border-radius: 5px;
border: 1px solid #000;
width: 100%;
box-sizing: border-box;
padding: 0 10px;
color: red;
background-color: red;
}
textarea {
height: 200px;
color: red;
background-color: red;
}
textarea+label {
width: calc(100% - 2px) !important;
top: 1px;
box-sizing: border-box;
border-radius: 5px 5px 0 0;
text-align: center;
color: red;
}
textarea:invalid,
select:invalid,
input:invalid {
box-shadow: none;
color: red;
}
textarea:invalid+label,
select:invalid+label,
input:invalid+label {
padding: 0 10px;
max-width: 360px;
color: red;
}
textarea:focus+label,
select:focus+label,
input:focus+label,
label {
position: absolute;
background: #a4a290;
max-width: 0;
padding: 0;
overflow: hidden;
left: 1px;
top: 1px;
height: 28px;
font: 14px/28px sans-serif;
-webkit-transition: all 0.25s;
-o-transition: all 0.25s;
transition: all 0.25s;
color: red;
border-radius: 5px 0 0 5px;
}
textarea:focus+label {
height: 0;
color: red;
}
input:-webkit-autofill {
-webkit-text-fill-color: black;
transition: background-color 5000s ease-in-out 0s;
}
<form>
<div>
<input type="text" id="firstname" required />
<label for="firstname">First Name</label>
</div>
<div>
<input type="email" id="email" required />
<label for="email">Email</label>
</div>
<div>
<input type="text" id="secondname" required />
<label for="secondname">Second Name</label>
</div>
<div>
<select id="type" required>
<option value=""></option>
<option value="1">Type 1</option>
<option value="2">Type 2</option>
<option value="3">Type 3</option>
<option value="4">Type 4</option>
</select>
<label for="type">Select type...</label>
</div>
<div>
<textarea id="comment" required /></textarea>
<label for="comment">Comment</label>
</div>
</form>
Source
https://jsbin.com/zofuqunavo/
#keyframes autofill {
to {
color: white;
background: green;
}
}
input:focus {
animation-name: autofill;
animation-fill-mode: both;
}
Using input:focus selector instead of input:autofill seem fix your issue.
Autofill is a bit unstable feature, the behaviour is changed multiple times and each browser has own implementation.
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%;
}
How to design an input text like in material design with a label that floats up and it doesn't overlap the content when the input is not focused, how can i implement that without using Materialise.CSS or any other library
I prefer this technique for its markup simplicity, accessibility, and keyboard-friendliness.
It uses relative and absolute positioning (an absolute label inside a relative container) and never "replaces" the label with another element (such as with the placeholder pseudo-element) because replacement techniques cause flickering in my experience. It also manages the pointer events so that the label never gets in the way of clicking to select the input (but once it's out of the way, its text is selectable).
I've used ems, since we're dealing with animated text. This should allow the technique to scale to different font sizes without modifying the offsets used for padding and margins.
This uses the required attribute and the :valid selector to check whether an input was left blank (in which case, the label drops back down). If this doesn't work for your use case, it can be worked around by adding and removing an empty class to the input using JavaScript (that's what the last CSS ruleset is for). Another option would be to use :placeholder-shown with a dummy placeholder, if you're okay with not supporting Microsoft Edge. Remember, CSS's :empty selector doesn't work the way you'd think it might on HTML inputs.
#import url('https://fonts.googleapis.com/css?family=Roboto');
body
{
/* just to make it feel a little more at home */
font-family: 'Roboto', sans-serif;
}
.floating-label
{
position: relative;
margin-top: 1.75em;
}
.floating-label input[type="text"]
{
border: none;
border-bottom: 1px solid gray;
margin-bottom: 1px;
}
.floating-label input[type="text"]:hover
{
border-bottom: 2px solid black;
margin-bottom: 0;
}
.floating-label input[type="text"]:focus,
.floating-label input[type="text"]:active
{
outline: none;
border-bottom: 2px solid #2196f3;
margin-bottom: 0;
}
.floating-label input[type="text"] + label
{
position: absolute;
pointer-events: none;
bottom: 0.1em;
left: 0.1em;
color: gray;
font-size: 1.0em;
transition: margin 0.2s ease,
color 0.2s ease,
font-size 0.2s ease;
}
.floating-label input[type="text"]:focus + label,
.floating-label input[type="text"]:active + label,
.floating-label input[type="text"]:valid + label
{
pointer-events: auto;
margin-bottom: 1.75em;
font-size: 0.7em;
}
.floating-label input[type="text"]:focus + label,
.floating-label input[type="text"]:active + label
{
color: #2196f3;
}
.floating-label input[type="text"].empty:not(:focus) + label,
.floating-label input[type="text"].empty:not(:active) + label
{
pointer-events: none;
margin-bottom: 0;
color: gray;
font-size: 1.0em;
}
<div class="floating-label">
<input id="first" type="text" required>
<label for="first">First Name</label>
</div>
<div class="floating-label">
<input id="last" type="text" required>
<label for="last">Last Name</label>
</div>
This is how I've done it previously.
The CSS has be processed from SCSS which is why it's so specific.
.container {
width: 15%;
}
.container .form-group {
margin: 0 0 16px;
}
.container .form-group.field--invalid > .field__input-container .field__decoration:before {
border-color: #e4134f;
width: 100%;
}
.container .form-group .field__input-container {
position: relative;
margin-bottom: 8px;
padding-top: 16px;
}
.container .form-group .field__input-container .field__input {
font-size: 18px;
line-height: 28px;
font-weight: 700;
letter-spacing: -1px;
background: transparent;
border: 0;
outline: 0;
padding-top: 20px;
padding-bottom: 2px;
width: 100%;
}
.container .form-group .field__input-container .field__input:focus + .field__label, .container .form-group .field__input-container .field__input:valid + .field__label {
font-size: 14px;
line-height: 20px;
bottom: 50%;
}
.container .form-group .field__input-container .field__input:focus ~ .field__decoration:before, .container .form-group .field__input-container .field__input:valid ~ .field__decoration:before {
width: 100%;
}
.container .form-group .field__input-container .field__input:focus ~ .arrow-down {
border-color: transparent;
}
.container .form-group .field__input-container .field__input--dropdown {
border-color: #000;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.container .form-group .field__input-container .field__input--dropdown + .field__label {
color: #000;
}
.container .form-group .field__input-container select::-ms-expand {
display: none;
}
.container .form-group .field__input-container .field__label {
color: #848484;
font-size: 19px;
line-height: 28px;
bottom: 2px;
left: 0;
pointer-events: none;
position: absolute;
top: auto;
transition: bottom 0.3s ease, font-size 0.3s ease, line-height 0.3s ease;
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
.container .form-group .field__input-container .field__label span {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
.container .form-group .field__input-container .field__decoration {
border-bottom: 1px solid;
border-color: #000;
}
.container .form-group .field__input-container .field__decoration:before {
display: block;
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 0;
border-bottom: 2px solid;
border-color: #000;
transition: width 0.3s ease, border-color 0.3s ease;
}
.container .form-group .field__input-container .arrow-down {
position: absolute;
right: 0;
bottom: 12px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #000;
transition: border-color 0.3s ease;
z-index: -1;
}
<div class="container">
<div id="user-first-name" class="form-group"><!-- field--invalid -->
<div class="field__input-container">
<input type="text" class="field__input" id="input-first-name" name="input-first-name" required value="" autocomplete="off">
<label class="field__label" id="username-label" for="input-first-name"><span>First name</span></label>
<div class="field__decoration"></div>
</div>
</div>
<div id="user-last-name" class="form-group"><!-- field--invalid -->
<div class="field__input-container">
<input type="text" class="field__input" id="input-last-name" name="input-last-name" required value="" autocomplete="off">
<label class="field__label" id="username-label" for="input-last-name"><span>Last name</span></label>
<div class="field__decoration"></div>
</div>
</div>
<div id="user-title" class="form-group"><!-- field--invalid -->
<div class="field__input-container">
<select class="field__input field__input--dropdown" id="input-title" name="input-title" required autocomplete="off">
<option selected value="" disabled hidden></option>
<option value="" disabled>Please select</option>
<option value="mr">Mr</option>
<option value="mrs">Mrs</option>
<option value="ms">Ms</option>
<option value="dr">Dr</option>
<option value="other">Other</option>
<option value="prefer not to say">Prefer not to say</option>
</select>
<label class="field__label" id="username-label" for="input-title"><span>Title</span></label>
<div class="field__decoration"></div>
<div class="arrow-down"></div>
</div>
</div>
</div>
I have this email register form. I'd like to ask how to move the <select> tag next to the "Desired Email Address" field.
I think i have to do a modification to the css code.
Here's the html and the CSS (snippet) code for the specific field:
(THIS IS ADDED BECAUSE STACKOVERFLOW NEEDS MORE DETAILS qwefrqwefqwaefwqefq)
body {
background: #384047;
font-family: sans-serif;
font-size: 10px;
}
form {
background: #fff;
padding: 4em 4em 2em;
max-width: 400px;
margin: 50px auto 0;
box-shadow: 0 0 1em #222;
border-radius: 2px;
}
form h2 {
margin: 0 0 50px 0;
padding: 10px;
text-align: center;
font-size: 30px;
color: #666666;
border-bottom: solid 1px #e5e5e5;
}
form p {
margin: 0 0 3em 0;
position: relative;
}
form input[id="Email"] {
display: block;
box-sizing: border-box;
width: 60%;
outline: none;
margin: 0;
}
form input {
display: block;
box-sizing: border-box;
width: 100%;
outline: none;
margin: 0;
}
form input[type="text"],
form input[type="password"] {
background: #fff;
border: 1px solid #dbdbdb;
font-size: 1.6em;
padding: .8em .5em;
border-radius: 2px;
}
form input[type="text"]:focus,
form input[type="password"]:focus {
background: #fff;
}
form span {
display: block;
background: #F9A5A5;
padding: 2px 5px;
color: #100;
}
form input[type="submit"] {
background: rgba(148, 186, 101, 0.7);
box-shadow: 0 3px 0 0 rgba(123, 163, 73, 0.7);
border-radius: 2px;
border: none;
color: #fff;
cursor: pointer;
display: block;
font-size: 2em;
line-height: 1.6em;
margin: 2em 0 0;
outline: none;
padding: .8em 0;
text-shadow: 0 1px #68B25B;
}
form input[type="submit"]:hover {
background: #94af65;
text-shadow: 0 1px 3px rgba(70, 93, 41, 0.7);
}
form label {
position: absolute;
left: 8px;
top: 12px;
color: #999;
font-size: 16px;
display: inline-block;
padding: 4px 10px;
font-weight: 400;
background-color: rgba(255, 255, 255, 0);
-moz-transition: color 0.3s, top 0.3s, background-color 0.8s;
-o-transition: color 0.3s, top 0.3s, background-color 0.8s;
-webkit-transition: color 0.3s, top 0.3s, background-color 0.8s;
transition: color 0.3s, top 0.3s, background-color 0.8s;
}
form label.floatLabel {
top: -11px;
background-color: rgba(255, 255, 255, 0.8);
font-size: 14px;
}
form select {
background: #fff;
border: 1px solid #dbdbdb;
font-size: 1.6em;
padding: .8em .5em;
border-radius: 2px;
display: block;
}
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Mailbox Registration</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="register.php" method="post">
<h2>Create a Mailbox</h2>
<p>
<label for="Name" class="floatLabel">First Name</label>
<input id="fname" name="First_Name__1" type="text" required>
</p>
<p>
<label for="Name" class="floatLabel">Last Name</label>
<input id="lname" name="Last_Name__2" type="text" required>
</p>
<p>
<label for="Mailbox__3" class="floatLabel">Desired Email Address</label>
<input id="Email" name="Mailbox__3" type="text" required>
<select name="domain">
<option value="#limesky.ga" selected>#limesky.ga
<option value="#ircocs.ga">#ircocs.ga
</select>
</p>
<p>
<label for="password" class="floatLabel">Password</label>
<input id="password" name="Password__4" type="password" required>
</p>
<p>
<label for="confirm_password" class="floatLabel">Confirm Password</label>
<input id="confirm_password" name="confirm_password"
type="password" required>
</p>
<p>
<input type="Submit" value="Create My Account" id="Submit" name="Submit">
</p>
</form>
<script> src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3 /jquery.min.js' </script>
</body>
</html>
DO this:
CSS:
body {
background: #384047;
font-family: sans-serif;
font-size: 10px;
}
.domain {
margin-left: 253px;
margin-top: -50px;
}
HTML:
<p>
<label for="Mailbox__3" class="floatLabel">Desired Email Address</label>
<input id="Email" name="Mailbox__3" type="text" required><select class="domain" name="domain">
<option value="#limesky.ga" selected>#limesky.ga
<option value="#ircocs.ga">#ircocs.ga
</select>
</p>
Add a <br/> tag after the desired email address input box.
<input id="Email" name="Mailbox__3" type="text" required></br><select name="domain">
<option value="#limesky.ga" selected>#limesky.ga
<option value="#ircocs.ga">#ircocs.ga
</select>
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;
}