對于許多網站設計者來說,表單是非常重要的一部分。然而,表單的默認樣式在不同的瀏覽器中有很大的差別,這對于設計師來說是一個挑戰。CSS為我們提供了一種控制表單樣式的方法。
input[type=text], select, textarea { padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; }
以上是一個基本的CSS表單樣式。它會將所有文本輸入字段、下拉菜單和文本區域的邊框樣式設置為灰色,同時顯示一個圓角邊框效果。對于提交按鈕,它具有綠色的背景顏色和白色的文本顏色,以及hover時的深綠色背景顏色。
為了適應不同的瀏覽器,我們還需要添加用戶代理樣式。人們常常使用reset.css或normalize.css來規范化不同瀏覽器的默認樣式。
/* 規定所有表單元素的邊框大小、樣式和顏色 */ * { box-sizing: border-box; margin: 0; padding: 0; } input[type=text], input[type=password], textarea { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } /* 提交按鈕的樣式 */ input[type=submit] { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } /* 提交按鈕hover狀態的樣式 */ input[type=submit]:hover { background-color: #45a049; } /* 創建兩個列 */ .col-25 { float: left; width: 25%; margin-top: 6px; } .col-75 { float: left; width: 75%; margin-top: 6px; }
通過使用normalize.css和上面的代碼示例,我們可以創建一個干凈、統一的表單樣式,適用于所有瀏覽器。
上一篇mysql如何刪除注冊表
下一篇css表單驗證碼