Brain Brain - 3 months ago 12
Javascript Question

When a input field is filled in, the label still comes down

Right now the the the "label" is put in a span, which is in turn put into a label and when you have text written in the input field, the label falls down over the text.

When you fill in the input field and click outside of that input field, the label should not come back down.

How can I make this possible?

See link: http://jsbin.com/semamimitu/edit?html,css,output



body {
background: url("http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg") no-repeat center center fixed;
object-fit: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
}
.form-register {
position: absolute;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left: 50%;
max-width: 320px;
}
.register-container{
background: #fff;
padding: 0 25px 25px;
}
.register-container .entity{
width: -webkit-calc(100% - 50px);
width: -moz-calc(100% - 50px);
width: calc(100% + 50px);
left: -25px;
margin-bottom: 25px;
}
.register-container .entity .btn {
width: 160px;
border: none;
border-radius: 0;
padding: 8px;
}
.register-container .entity .business{
color: #4894fc;
outline: none;
}
.register-container .entity .personal{
background-color: gainsboro;
right: -1px;
outline: none;
}
.form-register img{
width: 260px;
position: relative;
left: 30px;
bottom: 20px;
}
.register-container .gender{
margin-bottom: 25px;
}
.register-container .gender .btn{
width: 65px;
border: none;
border-radius: 0;
}
.register-container .gender .male{
color: white;
background-color: #4894fc;
outline: none;
}
.register-container .gender .female{
background-color: #dcdcdc;
color: #828282;
left: 1px;
outline: none;
}
.form-register .register_btn{
border: none;
border-radius: 0;
padding: 8px;
font-size: 14px;
background-color: rgb(72, 148, 252);
}

#register_one{
text-align: center;
position: relative;
top: 10px;
font-size: 12px;
color: #828282;
}
#register_one a{
color: rgb(72, 148, 252);
transition: all 0.3s;
}
#register_one a:hover {
color: rgb(0, 76, 181);
}
#register-two{
color: white;
font-size: 11px;
text-align: center;
width: 280px;
margin: 0 auto;
position: relative;
top: 10px;
}


.input {
position: relative;
z-index: 1;
display: inline-block;
max-height: 65px;
width: 100%;
}

.input__field {
position: relative;
display: block;
float: right;
border: none;
border-radius: 0;
background: #f0f0f0;
color: #aaa;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
outline: none;
}

.input__label {
display: inline-block;
float: right;
padding: 0 0.25em;
width: 40%;
color: #828282;
font-weight: bold;
font-size: 8px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.input__label-content {
position: relative;
display: block;
padding: 10px 0;
width: 100%;
font-size: 13px;
top: 20px;
}

.graphic {
position: absolute;
top: 0;
left: 0;
fill: none;
}

.icon {
color: #ddd;
font-size: 150%;
}

/* Individual styles */

/* Haruki */

.input__field--haruki {
padding: 0.4em 0.25em;
width: 100%;
background: transparent;
color: #808080;;
font-size: 16px;
border: none !important;
box-shadow: none !important;
}

.input__label--haruki {
position: relative;
bottom: 50px;
width: 100%;
height: 55px;
text-align: left;
pointer-events: none;
}

.input__label-content--haruki {
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}

.input__label--haruki::after {
content: '';
position: absolute;
left: 0;
bottom: 5px;
z-index: -1;
width: 100%;
height: 1px;
background: #828282;
}

.input__field--haruki:focus + .input__label--haruki .input__label-content--haruki,
.input--filled .input__label-content--haruki {
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-o-transform: translateY(-30px);
transform: translateY(-30px);
font-size: 1.3em;
}
.register-container .input--haruki:nth-last-child(3) {
max-height: 45px;
}

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>register</title>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<container class="register">
<form class="form-register">

<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<img src="http://www.onlinelogoontwerpen.com/wp-content/uploads/2015/08/logo-300x169.png" alt="bla bla">
<div class="register-container">

<div class="btn-group entity" role="group">
<button type="button" class="btn btn-default business">Business</button>
<button type="button" class="btn btn-default personal">Personal</button>
</div>

<div class="btn-group gender" role="group">
<button type="button" class="btn btn-default male">Male</button>
<button type="button" class="btn btn-default female">Female</button>
</div>

<span class="input input--haruki">
<input class="input__field input__field--haruki" type="text" id="name-register" class="form-control" required/>
<label for="name-register" class="input__label input__label--haruki sr-only">
<span class="input__label-content input__label-content--haruki">Name</span>
</label>
</span>

<span class="input input--haruki">
<input class="input__field input__field--haruki" type="text" id="email-register" class="form-control" required/>
<label for="name-register" class="input__label input__label--haruki sr-only">
<span class="input__label-content input__label-content--haruki">Email</span>
</label>
</span>

<span class="input input--haruki">
<input class="input__field input__field--haruki" type="text" id="mobile-register" class="form-control" required/>
<label for="name-register" class="input__label input__label--haruki sr-only">
<span class="input__label-content input__label-content--haruki">Mobile number</span>
</label>
</span>

<span class="input input--haruki">
<input class="input__field input__field--haruki" type="text" id="password-register" class="form-control" required/>
<label for="name-register" class="input__label input__label--haruki sr-only">
<span class="input__label-content input__label-content--haruki">Password</span>
</label>
</span>

<span class="input input--haruki">
<input class="input__field input__field--haruki" type="text" id="company-register" class="form-control" required/>
<label for="name-register" class="input__label input__label--haruki sr-only">
<span class="input__label-content input__label-content--haruki">Company name</span>
</label>
</span>

<button class="btn btn-lg btn-primary btn-block register_btn" type="submit">Register</button>
<p id="register_one">Already signed up? <a href="register.html">Sign in now</a></p>
</div>
<p id="register-two">Upon proceeding with your registration you will receive a confirmation email and we will store your data securely.</p>
</form>
</container>
</body>
</html>




Answer

Here is a pure CSS solution

body {
    background: url("http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg") no-repeat center center fixed;
    object-fit: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
}
.form-register {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 320px;
    transform: translate(-50%, -50%);
}
.register-container{
    background: #fff;
    padding: 0 25px 25px;
}
.register-container .entity{
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% + 50px);
    left: -25px;
    margin-bottom: 25px;
}
.register-container .entity .btn {
    width: 160px;
    border: none;
    border-radius: 0;
    padding: 8px;
}
.register-container .entity .business{
    color: #4894fc;
    outline: none;
}
.register-container .entity .personal{
    background-color: gainsboro;
    right: -1px;
    outline: none;
}
.form-register img{
    width: 260px;
    position: relative;
    left: 30px;
    bottom: 20px;
}
.register-container .gender{
    margin-bottom: 25px;
}
.register-container .gender .btn{
    width: 65px;
    border: none;
    border-radius: 0;
}
.register-container .gender .male{
    color: white;
    background-color: #4894fc;
    outline: none;
}
.register-container .gender .female{
    background-color: #dcdcdc;
    color: #828282;
    left: 1px;
    outline: none;
}
.form-register .register_btn{
    border: none;
    border-radius: 0;
    padding: 8px;
    font-size: 14px;
    background-color: rgb(72, 148, 252);
}

#register_one{
    text-align: center;
    position: relative;
    top: 10px;
    font-size: 12px;
    color: #828282;
}
#register_one a{
    color: rgb(72, 148, 252);
    transition: all 0.3s;
}
#register_one a:hover {
    color: rgb(0, 76, 181);
}
#register-two{
    color: white;
    font-size: 11px;
    text-align: center;
    width: 280px;
    margin: 0 auto;
    position: relative;
    top: 10px;
}


.input {
    position: relative;
    z-index: 1;
    display: inline-block;
    max-height: 65px;
    width: 100%;
}

.input__field {
    position: relative;
    display: block;
    float: right;
    border: none;
    border-radius: 0;
    background: #f0f0f0;
    color: #aaa;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
    outline: none;
}

.input__label {
    display: inline-block;
    float: right;
    padding: 0 0.25em;
    width: 40%;
    color: #828282;
    font-weight: bold;
    font-size: 8px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.input__label-content {
    position: relative;
    display: block;
    padding: 10px 0;
    width: 100%;
    font-size: 13px;
    top: 20px;
}

.graphic {
    position: absolute;
    top: 0;
    left: 0;
    fill: none;
}

.icon {
    color: #ddd;
    font-size: 150%;
}

/* Individual styles */

/* Haruki */

.input__field--haruki {
    padding: 0.4em 0.25em;
    width: 100%;
    background: transparent;
    color: #808080;;
    font-size: 16px;
    border: none !important;
    box-shadow: none !important;
}

.input__label--haruki {
    position: relative;
    bottom: 50px;
    width: 100%;
    height: 55px;
    text-align: left;
    pointer-events: none;
}

.input__label-content--haruki {
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.input__label--haruki::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    z-index: -1;
    width: 100%;
    height: 1px;
    background: #828282;
}

.input__field--haruki:focus + .input__label--haruki .input__label-content--haruki,
.input--filled .input__label-content--haruki {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px);
    font-size: 1.3em;
}
.register-container .input--haruki:nth-last-child(3) {
    max-height: 45px;
}


/* HIGHLIGHTER ================================== */

input:focus ~ .input__label span.input__label-content.input__label-content--haruki, 
input:valid ~ .input__label span.input__label-content.input__label-content--haruki{
  -webkit-transform: translateY(-30px); */
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px);
  font-size: 10px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<body>
    <container class="register">
        <form class="form-register">

<script src=""></script>
            <img src="http://www.onlinelogoontwerpen.com/wp-content/uploads/2015/08/logo-300x169.png" alt="bla bla">
            <div class="register-container">

                <div class="btn-group entity" role="group">
                    <button type="button" class="btn btn-default business">Business</button>
                    <button type="button" class="btn btn-default personal">Personal</button>
                </div>

                <div class="btn-group gender" role="group">
                    <button type="button" class="btn btn-default male">Male</button>
                    <button type="button" class="btn btn-default female">Female</button>
                </div>

                <span class="input input--haruki">
                    <input class="input__field input__field--haruki" type="text" id="name-register" class="form-control" required/>
                    <label for="name-register" class="input__label input__label--haruki sr-only">
                        <span class="input__label-content input__label-content--haruki">Name</span>
                    </label>
                </span>

                <span class="input input--haruki">
                    <input class="input__field input__field--haruki" type="text" id="email-register" class="form-control" required/>
                    <label for="name-register" class="input__label input__label--haruki sr-only">
                        <span class="input__label-content input__label-content--haruki">Email</span>
                    </label>
                </span>

                <span class="input input--haruki">
                    <input class="input__field input__field--haruki" type="text" id="mobile-register" class="form-control" required/>
                    <label for="name-register" class="input__label input__label--haruki sr-only">
                        <span class="input__label-content input__label-content--haruki">Mobile number</span>
                    </label>
                </span>

                <span class="input input--haruki">
                    <input class="input__field input__field--haruki" type="text" id="password-register" class="form-control" required/>
                    <label for="name-register" class="input__label input__label--haruki sr-only">
                        <span class="input__label-content input__label-content--haruki">Password</span>
                    </label>
                </span>

                <span class="input input--haruki">
                    <input class="input__field input__field--haruki" type="text" id="company-register" class="form-control" required/>
                    <label for="name-register" class="input__label input__label--haruki sr-only">
                        <span class="input__label-content input__label-content--haruki">Company name</span>
                    </label>
                </span>

                <button class="btn btn-lg btn-primary btn-block register_btn" type="submit">Register</button>
                <p id="register_one">Already signed up? <a href="register.html">Sign in now</a></p>
            </div>
            <p id="register-two">Upon proceeding with your registration you will receive a confirmation email and we will store your data securely.</p>
        </form>
    </container>
</body>

See my PEN

There is a selector called valid.

Using this selector you can get the desired effect

The :valid selector allows you to select elements that do not contain valid content, as determined by its type attribute. :valid is defined as a “validity pseudo-selector”, meaning it is used to style interactive elements based on an evaluation of user input.

input:focus ~ .input__label span.input__label-content.input__label-content--haruki, 
input:valid ~ .input__label span.input__label-content.input__label-content--haruki{
  -webkit-transform: translateY(-30px); */
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px);
    font-size: 10px; // add font size here for consistency
}

Add this styles in your css file

Comments