CSS 表單
一個表單案例，我們使用 CSS 來渲染 HTML 的表單元素：
CSS 實例
input[type=text], select {
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] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
輸入框(input) 樣式
使用 width 屬性來設置輸入框的寬度：
以上實例中設置了所有 <input> 元素的寬度為 100%，如果你只想設置指定類型的輸入框可以使用以下屬性選擇器：
input[type=text] - 選取文本輸入框input[type=password] - 選擇密碼的輸入框input[type=number] - 選擇數字的輸入框- ...
輸入框填充
使用 padding 屬性可以在輸入框中添加內邊距。
CSS 實例
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
注意我們設置了 box-sizing 屬性為
border-box。這樣可以確保流覽器呈現出帶有指定寬度和高度的輸入框是把邊框和內邊距一起計算進去的。
更多內容可以閱讀 CSS3 框大小 。
輸入框(input) 邊框
使用 border 屬性可以修改 input 邊框的大小或顏色，使用 border-radius 屬性可以給 input 添加圓角：
CSS 實例
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
如果你只想添加底部邊框可以使用 border-bottom 屬性:
CSS 實例
input[type=text] {
border: none;
border-bottom: 2px solid red;
}
輸入框(input) 顏色
可以使用 background-color 屬性來設置輸入框的背景顏色，color 屬性用於修改文本顏色：
CSS 實例
input[type=text] {
background-color: #3CBC8D;
color: white;
}
輸入框(input) 聚焦
默認情況下，一些流覽器在輸入框獲取焦點時（點擊輸入框）會有一個藍色輪廓。我們可以設置 input 樣式為 outline: none; 來忽略該效果。
使用 :focus 選擇器可以設置輸入框在獲取焦點時的樣式：
CSS 實例
input[type=text]:focus {
background-color: lightblue;
}
CSS 實例
input[type=text]:focus {
border: 3px solid #555;
}
輸入框(input) 圖示
如果你想在輸入框中添加圖示，可以使用 background-image 屬性和用於定位的background-position 屬性。注意設置圖示的左邊距，讓圖示有一定的空間：
CSS 實例
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
帶動畫的搜索框
以下實例使用了 CSS transition 屬性，該屬性設置了輸入框在獲取焦點時會向右延展。你可以在 CSS 動畫 章節查看更多內容。
CSS 實例
input[type=text] {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
文本框（textarea）樣式
注意: 使用 resize 屬性來禁用文本框可以重置大小的功能（一般拖動右下角可以重置大小）。
CSS 實例
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
下拉菜單（select）樣式
CSS 實例
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
按鈕樣式
CSS 實例
input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
更多內容可以參考我們的 CSS 按鈕 教學。
回應式表單
回應式表單可以根據流覽器窗口的大小重新佈局各個元素，我們可以通過重置流覽器窗口大小來查看效果：
高級: 以下實例使用了CSS3 多媒體查詢 來創建一個回應式表單。
CSS 實例
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
