填写输入字段时，标签仍然向下

【问题标题】：When a input field is filled in, the label still comes down填写输入字段时，标签仍然向下
【发布时间】：2017-01-09 08:42:23
【问题描述】：

现在，“标签”被放入一个跨度中，而该跨度又被放入一个标签中，当您在输入字段中写入文本时，标签会落在文本上方。

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

我怎样才能做到这一点？

查看链接：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>

【问题讨论】：

  • 也许一些代码可以帮助我们理解你...
  • 有一个链接，其中包含您所指的所有代码。这是一个 JSBIN 链接，因此 Stackoverflow 上的每个人都可以看到 sn-p 并立即使用它。你愿意把所有的 sn-p 代码都放在这里吗？
  • 链接可能会过时 - 请只发布足够的代码来显示问题 - minimal reproducible example
  • 拥有完整的演示有助于理解上下文，但与您的问题完全无关。您应该提供代码的最小版本，并提供足够的代码来重现问题。仅此而已。
  • 它只是 CSS，所以可能很难。

标签： javascript jquery html css twitter-bootstrap-3


【解决方案1】：

这是一个纯 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 选择器允许您选择不支持的元素 包含由其类型属性确定的有效内容。 ：有效的是 定义为“有效性 伪选择器”，意思是它用于设置交互元素的样式 基于对用户输入的评估。

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

【讨论】：

  • 看起来很棒只是一件小事，当您单击该输入字段时，是否也可以将字体大小保持在 8px（小）？现在标签又变大了。
  • 它非常简单。只需在 input:focus ~ 和 input:valid ~ 中添加字体大小。检查我更新的答案。
猜你喜欢
  • 2011-11-09
  • 1970-01-01
  • 2011-10-14
  • 2021-08-31
  • 2014-05-05
  • 1970-01-01
  • 2017-04-22
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode