input输入框聚焦状态样式

最新推荐文章于 2025-06-04 10:17:48 发布

原创最新推荐文章于 2025-06-04 10:17:48 发布 · 2.8w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #input

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

9 篇文章

订阅专栏

笔记

6 篇文章

订阅专栏

html/css

3 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说，上代码：
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;
}