input输入框聚焦状态样式

CSS样式布局实践

最新推荐文章于 2025-10-12 11:00:42 发布

原创最新推荐文章于 2025-10-12 11:00:42 发布 · 2.8w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #input

前端开发同时被 3 个专栏收录

9 篇文章

订阅专栏

笔记

6 篇文章

订阅专栏

html/css

3 篇文章

订阅专栏

本文介绍了一个使用CSS进行布局的具体案例，展示了如何通过简单的HTML结构配合特定的CSS样式实现美观且实用的输入框布局。文中提供了完整的HTML和CSS代码，并附上了最终效果的展示。

部署运行你感兴趣的模型镜像

废话不多说，上代码：
html结构：

<div class="flex-box">
    <p>
      <span>我是第一行<i class="icon icon-must"></i></span>
      <input type="text"  class="enabled text-info" placeholder="" />
    </p>
    <p>
      <span>我是第二行</span>
      <input type="text" placeholder=""  class="enabled text-info"/>
     </p>
    <p>
      <span>我是第三行<i class="icon icon-must"></i></span>
      <input type="text"  class="enabled text-info" placeholder="" />
    </p>
</div>

css代码：

.enabled{
    border: none;
    padding: 2px 12px;
    font-size: 14px;
    line-height: 1.5;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    outline: none;
}
input[type="text"]:focus, 
input[type="password"]:focus { 
  border-bottom: 1px solid #5cb85c;
}

效果如图所示：
聚焦的时候底部边框变成绿色

您可能感兴趣的与本文相关的镜像

Yolo-v8.3

Yolo

YOLO（You Only Look Once）是一种流行的物体检测和图像分割模型，由华盛顿大学的Joseph Redmon 和Ali Farhadi 开发。 YOLO 于2015 年推出，因其高速和高精度而广受欢迎