CSS搜索框是網頁設計中常用的一種元素,它可以讓用戶通過輸入關鍵詞來查找內容或信息。在CSS中,搜索框需要使用input元素,并且需要設置相關樣式屬性。
input[type="text"] { width: 200px; height: 30px; border: 2px solid #ccc; border-radius: 20px; padding: 5px 10px; font-size: 16px; outline: none; } input[type="submit"] { width: 60px; height: 30px; background-color: #337ab7; color: #fff; border: none; border-radius: 20px; font-size: 16px; cursor: pointer; }
上面的代碼設置了搜索框的基本樣式,包括輸入框的寬度、高度、邊框顏色和圓角等屬性,還設置了輸入框的字體大小和填充內邊距,并且取消了輸入框的默認輪廓線條。同時,還設置了提交按鈕的寬度、高度、背景色、字體顏色等屬性。
為了讓搜索框更加美觀和易用,還可以添加一些額外的樣式,比如鼠標懸停時的特效、輸入框獲取焦點時的變化等。同時,在實際使用中,還需要結合后臺程序進行相應的搜索功能實現。
上一篇css搜索框美化樣式
下一篇mysql把幾行疊加