大家好，我是 Just，这里是「设计师工作日常」，今天分享的是一个搜索框小组件，我自己增加了一些交互细节，希望大家喜欢。
《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。
目录
- 整体效果
- 核心代码
- html 代码
- css 部分代码
- 完整代码如下
- html 页面
- css 样式
- 页面渲染效果
整体效果
💎知识点：
1️⃣ transition 过渡属性
2️⃣ :before 和 :after 伪元素选择器
3️⃣ :hover 、 :focus 和 :valid 选择器
🔑思路：
创建一个输入框，再写一个搜索按钮，然后根据输入框是否有焦点、字符等状态来判断输入框边框颜色变化以及搜索按钮的颜色变化。
在搜索框中无字符时，搜索按钮是默认灰色，当输入框有字符时，搜索按钮会变化成蓝色，表示可点击搜索，更细化于交互，可以配合一些js验证以及表单提交来提升用户体验。
核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。
核心代码
html 代码
<label class="label77"><input class="inp77" size="16" type="search" placeholder="请输入关键字" required><span class="search-btn77"></span>
</label>
搜索输入框的主体代码结构。
css 部分代码
.label77{width:240px;height:42px;position: relative;overflow: hidden;
}
.inp77{width:240px;height:42px;line-height:42px;padding:0 16px;padding-right:42px;border:1px solid rgba(0,0,0,0.2);background-color:#ffffff;box-sizing: border-box;transition: all 0.3s;font-size:14px;border-radius:21px;color:#333;position: absolute;list-style: none;outline-style: none;
}
.search-btn77{position: absolute;top:23px;right:35px;
}
.search-btn77:before{content:'';width:16px;height:16px;border:2px solid rgba(0,0,0,0.6);border-radius:50%;display: block;position: absolute;top:-14px;transition: border 0.32s linear;
}
.search-btn77:after{content:'';width:2px;height:8px;background-color:rgba(0,0,0,0.6);display: block;position: absolute;top:3px;right:-19px;transform:rotate(-45deg);transition: background-color 0.32s linear;
}
.label77:hover.inp77,.inp77:focus,.inp77:valid{color:#000000;border:1px solid rgba(29,52,202,0.4);
}
.inp77:valid+.search-btn77:before{border:2px solid rgba(29,52,202,1);
}
.inp77:valid+.search-btn77:after{background-color:rgba(29,52,202,1);
}
1、定义
label标签以及input标签的基本样式，并且给input标签添加整体过渡属性transition，注意这里的input标签的type属性为type="search"。
2、基于
.search-btn77创建伪元素:before和:after，定义基本样式，通过定位、变形，绘制出搜索图标，并且分别添加transition过渡属性。
3、利用
:hover、:focus和:valid选择器，判断鼠标状态，根据不同的鼠标状态变化input输入框边框颜色以及字体颜色。
4、利用
:valid选择器，当输入框有字符串时，来变化搜索图标的整体颜色。
完整代码如下
html 页面
<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>搜索输入框动效</title></head><body><div class="app"><label class="label77"><input class="inp77" size="16" type="search" placeholder="请输入关键字" required><span class="search-btn77"></span></label></div></body>
</html>
css 样式
/**style.css**/
.app{width:100%;height:100vh;position: relative;display: flex;justify-content: center;align-items: center;
}
.label77{width:240px;height:42px;position: relative;overflow: hidden;
}
.inp77{width:240px;height:42px;line-height:42px;padding:0 16px;padding-right:42px;border:1px solid rgba(0,0,0,0.2);background-color:#ffffff;box-sizing: border-box;transition: all 0.3s;font-size:14px;border-radius:21px;color:#333;position: absolute;list-style: none;outline-style: none;
}
.search-btn77{position: absolute;top:23px;right:35px;
}
.search-btn77:before{content:'';width:16px;height:16px;border:2px solid rgba(0,0,0,0.6);border-radius:50%;display: block;position: absolute;top:-14px;transition: border 0.32s linear;
}
.search-btn77:after{content:'';width:2px;height:8px;background-color:rgba(0,0,0,0.6);display: block;position: absolute;top:3px;right:-19px;transform:rotate(-45deg);transition: background-color 0.32s linear;
}
.label77:hover.inp77,.inp77:focus,.inp77:valid{color:#000000;border:1px solid rgba(29,52,202,0.4);
}
.inp77:valid+.search-btn77:before{border:2px solid rgba(29,52,202,1);
}
.inp77:valid+.search-btn77:after{background-color:rgba(29,52,202,1);
}
页面渲染效果
以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。
[1] 原文阅读
[2] 《有趣的css》，访问网址：funcss.liujueyi.cn，欢迎大家访问。
我是 Just，这里是「设计师工作日常」，求点赞求关注！
