在网页设计中,搜索框是一个非常常用的元素之一。而如何使用 CSS 实现一款漂亮美观的搜索框,也是我们需要掌握的技能之一。/* 搜索框基础样式 */ .search-box{ position: rel
在网页设计中,搜索框是一个非常常用的元素之一。而如何使用 CSS 实现一款漂亮美观的搜索框,也是我们需要掌握的技能之一。
/* 搜索框基础样式 */ .search-box{ position: relative; display: inline-block; } .search-box input[type="text"]{ width: 200px; height: 30px; padding: 5px; border: 1px solid #ccc; border-radius: 20px; outline: none; } .search-box button{ position: absolute; right: 0; top: 0; width: 50px; height: 40px; background-color: #333; color: #fff; border-radius: 20px; border: none; outline: none; cursor: pointer; } /* 搜索框动态效果 */ .search-box input[type="text"]:focus{ width: 300px; transition: width 0.5s ease-in-out; } .search-box button:hover{ background-color: #666; transition: background-color 0.5s ease-in-out; }
以上代码实现了一个基本的搜索框基础样式,并在其基础上加入了搜索框的动态效果,使得搜索框更加美观和实用。要实现不同的搜索框样式,我们可以改变其背景、字体和动态效果等方面,使得搜索框与整个网页风格和体验相协调。
粉丝
0
关注
0
收藏
0