CSS搜索框是在網(wǎng)頁設(shè)計(jì)中非常重要的一部分。一個(gè)美觀的搜索框能夠提升用戶體驗(yàn),讓用戶更加愉悅地使用網(wǎng)站。
下面是一些常見的CSS搜索框樣式。
/*白色背景搜索框,帶圓角*/ .search-box { background-color: #fff; border-radius: 20px; padding: 10px; width: 300px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border: none; } .search-box input[type="text"] { border: none; font-size: 16px; width: 100%; outline: none; } /*帶搜索按鈕的搜索框*/ .search-box-btn { width: 300px; margin: 20px auto; position: relative; } .search-box-btn input[type="text"] { width: 100%; padding: 10px; border: none; border-radius: 20px; } .search-box-btn button { border: none; background-color: #333; color: #fff; cursor: pointer; padding: 10px 15px; border-radius: 20px; position: absolute; top: 0; right: 0; } /*透明背景,帶邊框的搜索框*/ .transparent-box { background-color: rgba(255, 255, 255, 0.5); padding: 10px; border: 1px solid #ccc; border-radius: 20px; } .transparent-box input[type="text"] { background-color: transparent; border: none; width: 100%; padding: 10px; font-size: 16px; } /*帶下拉框的搜索框*/ .select-box { position: relative; } .select-box input[type="text"] { width: 100%; padding: 10px; border: none; border-radius: 20px; } .select-box .select { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background-color: #fff; border-radius: 20px; border: 1px solid #ccc; max-height: 200px; overflow-y: auto; display: none; } .select-box .select .option { padding: 10px; cursor: pointer; } .select-box .select .option:hover { background-color: #f0f0f0; } .select-box.active .select { display: block; }
以上是一些常用的CSS搜索框樣式,可以根據(jù)需求進(jìn)行相應(yīng)的修改和定制,從而創(chuàng)造出更獨(dú)特和美觀的搜索框。