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

Question

Right now 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>

There is a link which contains all the code you are referring to. It's a JSBIN link so that everyone on Stackoverflow can see the snippet and play around with it right away. Would you prefer to have all the snippet code here? — Alex, Sep 01 '16 at 12:50
Links can go stale- do please post only enough code to show the issue - [mcve] — mplungjan, Sep 01 '16 at 12:54
Having a fully working demo helps understand the context, but is completely irrelevant to your question. You should provide a minimal version of your code, with just enough code to reproduce the issue. Nothing more. — blex, Sep 01 '16 at 12:54
I think there is no pure CSS solution available for this. `:empty` and `:not(:empty)` do not work on input fields as explained [here](http://stackoverflow.com/questions/8639282/notempty-css-selector-is-not-working). I would recommend to add/remove class names to empty/filled fields via JS and use the appropriate classes in your CSS stylesheet. — SaschaM78, Sep 01 '16 at 13:00
I've put everything in a snippet here and hopefully this will help. Is there anything else I can do to clarify the challenge? @SaschaM78, do you have an example? — Alex, Sep 01 '16 at 13:05
The below answer from Jinu Kurian seems to be a great solution, give it a try. Anyways, here's an [example JSFiddle](https://jsfiddle.net/Moonbird_IT/rev41ezr/2/) of how you could modify input classes depending on the state. — SaschaM78, Sep 01 '16 at 13:26

Jinu Kurian · Accepted Answer · 2016-09-01T13:31:57.127

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

Looks great just one small thing, is it also possible to have the font-size remain at 8px (small) when you click away from that input field? Right now the label get's big again. — Alex, Sep 01 '16 at 13:25
Its very simple. just add the font-size in the input:focus ~ and input:valid ~ . Check my updated answer. — Jinu Kurian, Sep 01 '16 at 13:30

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

1 Answers1