CSS重置表單是一種常見的前端技術,它可以幫助我們規范表單元素的默認樣式,讓它們在各個瀏覽器中保持一致的外觀。下面我們來看一下具體實現。
/* 重置表單樣式 */ body, input, button, select, textarea { margin: 0; padding: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; background: none; border: none; outline: none; box-sizing: border-box; } /* 改變部分輸入框樣式 */ input[type="checkbox"], input[type="radio"] { box-sizing: content-box; padding: 0; } /* 隱藏部分控件 */ input[type="search"], input[type="color"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="range"], input[type="search"], input[type="tel"], input[type="url"], input[type="text"]::-webkit-input-placeholder { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; } /* 修改部分控件的樣式 */ input[type="search"], input[type="text"], input[type="tel"], input[type="url"], textarea { font-size: 14px; line-height: 1.5; padding: 8px 12px; border-radius: 4px; border: 1px solid #ddd; } select { font-size: 14px; line-height: 1.5; padding: 8px 12px; border-radius: 4px; border: 1px solid #ddd; background: no-repeat right center / 16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23333' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 8l-5 5-5-5'/%3E%3C/svg%3E"); appearance: none; }
以上CSS代碼列舉了常見的表單元素,并針對不同的元素做了不同的樣式設置。其中,box-sizing屬性使得表單元素的尺寸計算更加精確;appearance屬性去除了瀏覽器默認的外觀;-webkit-input-placeholder屬性可以修改輸入框的默認提示文字樣式。如果你有更多需要自定義的表單樣式,可以根據實際情況再做調整。
上一篇div css九宮格按鈕
下一篇div css 論文簡介