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 屬性來設置輸入框的寬度：

CSS 實例

input {
width: 100%;
}

以上實例中設置了所有 元素的寬度為 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

如果你只想添加底部邊框可以使用

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 樣式為