在制作網頁時,除了要考慮頁面的布局,樣式表也是必不可缺的部分。其中,表單則是我們在網頁中經常使用的交互元素之一。下面介紹一些常見的表單樣式。
/*文本框樣式*/ input[type="text"], input[type="password"], textarea { padding: 10px; border: none; border-radius: 5px; font-size: 16px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } /*按鈕樣式*/ input[type="submit"], input[type="reset"] { padding: 8px 16px; border: none; border-radius: 5px; font-size: 16px; color: #fff; background-color: #4caf50; cursor: pointer; } /*單選框和復選框樣式*/ input[type="radio"], input[type="checkbox"] { appearance: none; outline: none; border: none; width: 20px; height: 20px; border-radius: 50%; margin-right: 8px; cursor: pointer; } /*單選框和復選框選中狀態樣式*/ input[type="radio"]:checked, input[type="checkbox"]:checked { background-color: #4caf50; } /*下拉框樣式*/ select { padding: 8px; border: none; border-radius: 5px; font-size: 16px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
以上是常用的幾種表單樣式,通過CSS可以實現不同效果的組合。在實際應用中,我們可以根據需要對表單進行樣式調整,使其更加美觀、易用。
上一篇網頁css選擇器的命名
下一篇css寫不規則三角形