All geek questions in one place

When the input field is full, the label still falls

Currently, the “label” is placed in a range, which, in turn, is placed in the label, and when you have text written in the input field, the label falls on the text.

When you fill in the input field and click outside this input field, the label should not be returned.

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>
Run codeHide result
+4
source share
1 answer

Here is a clean 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>
Run codeHide result

Watch my pen

There is a valid selector .

,

:valid , , .: " ", .

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
}

css

+6

Source: https://habr.com/ru/post/1653309/

More articles:


All Articles