CSS提交按鈕搜索樣式
在網頁設計中，提交按鈕是非常重要的一個部分。在許多情況下，提交按鈕還必須兼顧搜索功能。這就需要對提交按鈕進行樣式設計，使其既美觀又實用。
下面介紹如何使用CSS設計提交按鈕搜索樣式。
提交按鈕基本樣式
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}以上代碼展示了一個基本的提交按鈕樣式。在這個樣式中，我們設置了按鈕的背景顏色、字體顏色、內邊距、文本大小和外邊距等基本屬性。
提交按鈕搜索樣式
button.search {
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}以上代碼展示了提交按鈕搜索樣式的設計方法。在這個樣式中，我們加入了一個搜索圖標，并設置了圖標的位置和重復方式。同時，為了防止搜索圖標和文本重疊，我們還設置了左側的內邊距。
示例代碼
<!DOCTYPE html>
<html>
<head>
<style>
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
button.search {
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
</style>
</head>
<body>
<button>提交</button>
<button class="search">搜索</button>
</body>
</html>以上代碼為一個完整的HTML頁面示例。在此示例中，我們分別展示了一個基本提交按鈕樣式和一個帶有搜索圖標的提交按鈕樣式。你可以根據實際需要進行樣式設置。
上一篇css規則有哪幾個類型
下一篇css描述正確的是