填写输入字段时，标签仍然会关闭

时间：2016-09-01 12:44:52

标签： javascript jquery html5 css3 twitter-bootstrap-3

现在是＆＃34;标签＆＃34;放入一个跨度，然后将其放入标签中，当您在输入字段中写入文本时，标签会落在文本上。

当您填写输入字段并单击该输入字段外部时，标签不应该返回。

我怎样才能做到这一点？

请参阅链接：http://jsbin.com/semamimitu/edit?html,css,output

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：6)

  

这是一个纯粹的 CSS 解决方案

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>

查看我的 PEN

有一个名为 valid 的选择器。

使用此选择器可以获得所需的效果

  

:valid选择器允许您选择不支持的元素   包含有效内容，由其type属性确定。 ：有效是   定义为“有效性   伪选择器“，意思是它用于设置交互元素的样式   基于对用户输入的评估。

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文件中添加此样式

相关问题
最新问题