设为首页收藏本站天天打卡
随便看看
  • 社区BBS
  • 资讯
  • 资源分享
  • 广播Follow
  • 圈子Group
  • 排行榜Ranklist
    • 立即注册
    狐狸聚合登录 狐狸导航 大流量卡免运费 此位置招租 阿里云99元服务器 腾讯云99元服务器 华为云特惠活动进行中 任推邦 - 不扣量的项目拉新平台 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租
    九歌论坛 - 努力做有价值的资源论坛！！！»社区 › 资源分享 › 资源分享 › CSS特效丨自定义文本框，浮动标签动画（第一版） ...
    返回列表 发布新帖
    查看: 48|回复: 0

    [源码分享] CSS特效丨自定义文本框，浮动标签动画（第一版）

    竹林

    107

    主题

    1

    回帖

    1万

    积分

    管理员

    积分
    14442
    发表于 2024-11-6 20:44:31 | 查看全部 |阅读模式 IP:江苏


    1. <body>
    2.   <div class="container mt-5">
    3.     <div class="form-group floating-label">
    4.       <input type="text" class="form-control" id="textInput" placeholder=" " />
    5.       <label for="textInput">请输入名称</label>
    6.     </div>
    7.   </div>
    8. </body>
    复制代码
    1. <style>
    2.   body{
    3.     padding: 200px;
    4.   }
    5.   .floating-label {
    6.     position: relative;
    7.     margin-bottom: 1.5rem;
    8.   }


    11.   .floating-label input {
    12.     font-size: 1rem;
    13.     border: 1px solid #ced4da;
    14.     border-radius: 0.375rem;
    15.     padding: 0.75rem 0.75rem;
    16.     background-color: #fff;
    17.     transition: border-color 0.3s ease, box-shadow 0.3s ease;
    18.   }


    21.   .floating-label label {
    22.     position: absolute;
    23.     top: 50%;
    24.     left: 0.75rem;
    25.     font-size: 1rem;
    26.     color: #6c757d;
    27.     pointer-events: none;
    28.     transition: all 0.2s ease;
    29.     transform: translateY(-50%);
    30.     background-color: #fff;
    31.     padding: 0 0.25rem;
    32.     z-index: 1;
    33.   }


    36.   .floating-label input:focus {
    37.     border-color: #495057;
    38.     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    39.   }


    42.   .floating-label input:focus+label,
    43.   .floating-label input:not(:placeholder-shown)+label {
    44.     top: -0.75rem;
    45.     left: 0.75rem;
    46.     font-size: 0.75rem;
    47.     color: #495057;
    48.     background-color: #fff;
    49.     padding: 0 0.25rem;
    50.     transform: translateY(0);
    51.   }


    54.   .floating-label input:not(:placeholder-shown) {
    55.     border-color: #495057;
    56.   }
    57. </style>
    复制代码
    解释
    • .floating-label: 这个类将用于包裹文本框和标签，使它们可以进行定位和样式调整。
    • input: 设置输入框的基本样式，包括字体、边框和圆角。
    • label: 初始状态下，标签位于文本框内，并在焦点获取或有内容时上移。
    • input:focus: 当文本框获得焦点时，边框颜色和阴影效果将变化。
    • input:focus + label: 当文本框获得焦点或者有内容时，标签将上移并改变样式，以便显示为浮动的分组框标签。
    效果
    这样设置后，文本框将具有如下效果：
    • 默认情况下，标签会在文本框内。
    • 当文本框获得焦点或者有输入内容时，标签会上移并以较小字体显示，创建出类似于分组框的效果。

    免责声明

    本站提供的一切软件、教程和内容信息仅限用于学习和研究，不得用于商业或者非法用途，否则，一切后果请用户自负；本站信息来自网络收集整理，版权争议与本站无关，您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除相应的内容；如果您喜欢该内容，请支持正版，得到更好的服务；我们非常重视版权问题，如有侵权请与我们联系，敬请谅解！

    联系我们： 如有疑问或发现违规行为，请联系管理员：brynn@foxccs.com

    什么是人，欲望满身。
    回复

    使用道具 举报

    返回列表 发布新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关于我们

    关于我们 加入我们 新闻动态 联系我们

    服务支持

    小黑屋 排行榜 违规举报 投诉反馈
    投诉/建议联系

    brynn@foxccs.com

    欢迎各位朋友加入本社区，
    共同维护良好的社区氛围
    • 加入QQ用户群
    • 关注公众号
    Copyright © 2001-2024 九歌论坛 版权所有 All Rights Reserved.
    关灯 在本版发帖
    扫一扫添加微信客服
     QQ客服返回顶部
    快速回复 返回顶部 返回列表