如果要對一個表格或列表進行篩選,可以使用篩選框(Filter Box)來快速搜索一些特定的數據。篩選框常常被用于商城、管理系統等需要搜索大量數據的場景。在本文中,我們將介紹篩選框CSS的寫法。
.filter-box { position: relative; } .filter-box input { padding: 8px 40px 8px 10px; border: solid 1px #dbdbdb; border-radius: 25px; width: 200px; font-size: 16px; outline: none; } .filter-box button { position: absolute; top: 0; right: 0; background-color: #007bff; border-radius: 25px; border: none; color: #fff; font-size: 16px; padding: 8px 15px; cursor: pointer; } .filter-box button:hover { background-color: #0069d9; }
以上是一個基本的篩選框樣式,我們可以在表格或列表上添加class為filter-box的div,然后在里面添加一個input和一個button元素。
同時,我們也可以根據需求進行一些樣式的修改,比如修改寬度、高度、字體顏色等等。建議在實際使用中靈活調整樣式來達到更好的視覺效果。