在Web开发中,搜索条是一个必不可少的组件,它能够让用户快速地找到自己需要的信息。CSS提供了丰富的样式选择器和属性,可以让我们轻松地实现一个美观、实用的搜索条。首先,我们可以给搜索条添加圆角,让它看
.search-bar { border-radius: 10px; }
.search-input { padding: 10px; margin-right: 10px; border-radius: 5px; border: none; } .search-button { padding: 10px; background-color: #00c0ef; color: #fff; border-radius: 5px; border: none; }
.search-input::placeholder { color: #999; }
.search-bar { width: 200px; transition: width 0.5s ease; } .search-input:focus { width: 150px; }
@media screen and (max-width: 768px) { .search-bar { display: flex; flex-direction: column; } .search-input { margin-right: 0; margin-bottom: 10px; } }
粉丝
0
关注
0
收藏
0