CSS搜索按鈕input樣式是網頁設計中的一種常見樣式,能夠讓搜索按鈕在不同的網頁上呈現統一美觀的效果。本文將簡單介紹如何使用CSS樣式來實現搜索按鈕input美化。
input[type="search"] { border: none; background-color: #EEE; border-radius: 20px; width: 200px; height: 30px; padding: 5px; font-size: 16px; } input[type="search"]:focus { outline: none; } input[type="submit"] { border: none; background-color: #555; border-radius: 20px; width: 60px; height: 30px; color: #FFF; cursor: pointer; }
上述代碼中,我們首先為搜索框input設置了邊框、背景色、邊框圓角、寬高、內邊距和字體大小等樣式,讓搜索框呈現出簡潔美觀的效果。而對于搜索按鈕input,我們則設置了邊框、背景色、邊框圓角、寬高和文本顏色等樣式,同時還加入了鼠標懸浮時的樣式,讓搜索按鈕具有更好的視覺體驗。
值得注意的是,我們還為搜索框添加了:focus偽類,這是為了在搜索框獲得焦點時去除默認的外框,讓搜索框看起來更加美觀。
通過上述樣式設置,我們能夠讓搜索按鈕input在不同的網頁上呈現出統一的美觀效果,進一步提高用戶體驗和用戶參與度。
上一篇java難度和電氣自動化
下一篇css表格的默認文字居中