CSS特效丨自定义文本框，浮动标签动画（第一版）！

七夏（UID：1） · 发表于 2024-11-6 17:29:37

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

<body>
  <div class="container mt-5">
    <div class="form-group floating-label">
      <input type="text" class="form-control" id="textInput" placeholder=" " />
      <label for="textInput">请输入名称</label>
    </div>
  </div>
</body>

<style>
  body{
    padding: 200px;
  }
  .floating-label {
    position: relative;
    margin-bottom: 1.5rem;
  }


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


  .floating-label label {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    font-size: 1rem;
    color: #6c757d;
    pointer-events: none;
    transition: all 0.2s ease;
    transform: translateY(-50%);
    background-color: #fff;
    padding: 0 0.25rem;
    z-index: 1;
  }


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


  .floating-label input:focus+label,
  .floating-label input:not(:placeholder-shown)+label {
    top: -0.75rem;
    left: 0.75rem;
    font-size: 0.75rem;
    color: #495057;
    background-color: #fff;
    padding: 0 0.25rem;
    transform: translateY(0);
  }


  .floating-label input:not(:placeholder-shown) {
    border-color: #495057;
  }
</style>

解释

.floating-label: 这个类将用于包裹文本框和标签，使它们可以进行定位和样式调整。
input: 设置输入框的基本样式，包括字体、边框和圆角。
label: 初始状态下，标签位于文本框内，并在焦点获取或有内容时上移。
input:focus: 当文本框获得焦点时，边框颜色和阴影效果将变化。
input:focus + label: 当文本框获得焦点或者有内容时，标签将上移并改变样式，以便显示为浮动的分组框标签。

效果

这样设置后，文本框将具有如下效果：

默认情况下，标签会在文本框内。
当文本框获得焦点或者有输入内容时，标签会上移并以较小字体显示，创建出类似于分组框的效果。

CSS特效丨自定义文本框，浮动标签动画（第一版）！

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

解释

效果

快速回帖

分享帝

龙年限定

关于楼主

商务推广