樣式：

代碼：

<form method="post" action="search.jsp" name="search"><div class="search"><div class="search_box"><span class="searchicon"></span> <input type="search" name="tname"class="search_input" id="searchInput" placeholder="請輸入你要搜索物品的名稱"></div><label class="search_label" id="searchText"> <inputtype="button" value="搜索" class="round_button blue" onclick="go()"></label></div></form> .search {background-color: #F0EEEE;display: flex;padding: .5rem 1rem;position: relative; }.search_box {flex: 1;position: relative; }.searchicon {position: absolute;height: .5rem;width: .5rem;background: transparent;border: 2px solid #43b3e7;top: .5rem;left: .5rem;border-radius: 100%; }.searchicon:after {content: "";position: absolute;background: #43b3e7;height: 6px;width: 3px;bottom: -5px;right: -3px;transform: rotate(-45deg); }.search_box input {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-appearance: none;font-size: 1rem;height: 2.2rem;width: 100%;border-radius: 0.3rem;padding-left: 1.8rem; }.search_label {padding-left: 1rem;height: 2rem;line-height: 2rem;font-size: 1rem; }.round_button {border: 1px solid;font: bold 12px/25px Arial, sans-serif;text-align: center;font-size: 20px;width: 60px;height: 35px;border-radius: 15px; }

?

?

總結

以上是生活随笔為你收集整理的CSS：个人常用搜索框样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。