搜索框在网站设计中是非常常见的元素,针对不同的设计风格和网站主题,我们可以使用不同的CSS样式来打造搜索框,为网站增添更多的美观和互动性。/*基础搜索框样式*/ .search-box { width
搜索框在网站设计中是非常常见的元素,针对不同的设计风格和网站主题,我们可以使用不同的CSS样式来打造搜索框,为网站增添更多的美观和互动性。
/*基础搜索框样式*/ .search-box { width: 300px; height: 40px; border: 2px solid #ccc; border-radius: 20px; padding: 5px 10px; font-size: 16px; transition: all .3s ease; } .search-box:focus { outline: none; border: 2px solid #008CBA; } /*圆角按钮搜索框*/ .round-search-box { width: 300px; height: 40px; border-radius: 30px; background-color: #f2f2f2; outline: none; padding-left: 20px; font-size: 16px; border: none; transition: all .3s ease; } .round-search-box:focus { background-color: #fff; box-shadow: 0 0 5px #008CBA; } /*卡片式搜索框*/ .card-search-box { width: 300px; height: 40px; border-radius: 20px; background-color: #fff; border: solid 2px #ccc; position: relative; box-shadow: 0 2px 5px rgba(0,0,0,.1); } .card-search-box:before { content: '\f002'; font-family: FontAwesome; font-size: 20px; color: #999; padding: 0 10px; position: absolute; left: 0; top: 5px; } .card-search-box input[type="text"] { width: 100%; height: 100%; padding: 5px 10px 5px 45px; font-size: 16px; border: none; outline: none; }
以上是3种不同样式的搜索框,基础样式可直接使用,圆角按钮样式增加了动画效果,提供更好的用户体验;卡片样式运用了FontAwesome字体图标,增加美观性和时尚感,同时也可以根据实际需求自由调整样式效果。
粉丝
0
关注
0
收藏
0