CSS 可輸入是指在Web開發中,使用CSS技術來控制可輸入元素的樣式和交互狀態。這種技術可以使得輸入框、按鈕等用來收集用戶輸入的元素更加美觀、易用。下面是一些常用的CSS可輸入樣式。
首先是輸入框的樣式。我們可以使用CSS的border、border-radius、box-shadow等屬性來美化輸入框的邊框和陰影效果。同時,使用outline、background-color等屬性來調整輸入框的選中狀態和背景色。
input[type="text"] { border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc; outline: none; background-color: #f9f9f9; } input[type="text"]:focus { border-color: #66afe9; box-shadow: 0 0 5px #66afe9; background-color: #fff; }下面是按鈕的樣式。我們可以使用CSS的background、border、box-shadow等屬性來美化按鈕的外觀和效果。同時,使用text-align、font-size、color等屬性來調整按鈕的字體和文字描述。
button { background: #4CAF50; border: none; border-radius: 5px; box-shadow: 0 3px 0 #2F784F; color: #fff; cursor: pointer; font-family: Arial; font-size: 16px; margin: 10px; padding: 10px 20px; text-align: center; text-decoration: none; } button:hover, button:active { background: #2F784F; box-shadow: 0 2px 0 #2F784F; color: #fff; }最后是復選框和單選框的樣式。我們可以使用CSS的appearance、background、border等屬性來控制復選框和單選框的外觀。同時,使用size、color等屬性來改變復選框和單選框的大小和選中顏色。
input[type="checkbox"], input[type="radio"] { appearance: none; background: #f4f4f4; border: 1px solid #ccc; border-radius: 50%; box-shadow: none; display: inline-block; height: 20px; line-height: 20px; margin: 0 10px 0 0; position: relative; top: 5px; width: 20px; } input[type="checkbox"]:checked, input[type="radio"]:checked { background: #2196F3; border-color: #2196F3; color: #fff; }以上就是一些常用的CSS可輸入樣式。在實際開發中,我們可以根據具體需求和設計稿來定制更加豐富、美觀的可輸入元素樣式。
上一篇css 右邊圓角
下一篇css3拖放到任意位置