CSS中的椭圆形搜索框一直是网页设计中十分流行的一种元素。它既美观又实用,可以很好地满足用户需求。.search-box { position: relative; width: 300px; hei
CSS中的椭圆形搜索框一直是网页设计中十分流行的一种元素。它既美观又实用,可以很好地满足用户需求。
.search-box { position: relative; width: 300px; height: 30px; border-radius: 20px; background: #eee; } .search-box input { position: absolute; top: 0; left: 0; border: none; height: 100%; width: 100%; border-radius: 20px; padding: 0 50px 0 20px; font-size: 14px; background: transparent; outline: none; } .search-box button { position: absolute; top: 0; right: 0; border: none; height: 100%; width: 50px; border-radius: 20px; font-size: 14px; font-weight: bold; color: #fff; background: #007bff; }
上面是一个简单的椭圆形搜索框的CSS代码示例。我们通过设置相对定位和宽高属性来定义搜索框的基本宽高和位置。接着,通过设置边框半径和背景颜色来实现椭圆形效果。
我们在搜索框中添加了一个输入框和按钮元素。通过设置绝对定位和宽高属性来让它们与搜索框重合。在输入框中,我们设置了边框和内边距,使其具有相应的样式和间距。为了让输入框透明,我们将其背景设置为transparent。
最后,我们给按钮设置了一个特殊的背景颜色和字体颜色,使其在搜索框中显眼易懂。搜索框就完成了!
粉丝
0
关注
0
收藏
0