中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

上一篇：CSS 屬性選擇器 下一篇：CSS 計(jì)數(shù)器

CSS 表單

一個(gè)表單案例，我們使用 CSS 來(lái)渲染 HTML 的表單元素：

CSS 實(shí)例

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; }

運(yùn)行代碼 ?

輸入框(input) 樣式

使用 width 屬性來(lái)設(shè)置輸入框的寬度：

CSS 實(shí)例

input { width: 100%; }

運(yùn)行代碼 ?

以上實(shí)例中設(shè)置了所有 <input> 元素的寬度為 100%，如果你只想設(shè)置指定類型的輸入框可以使用以下屬性選擇器：

  • input[type=text] - 選取文本輸入框
  • input[type=password] - 選擇密碼的輸入框
  • input[type=number] - 選擇數(shù)字的輸入框
  • ...

輸入框填充

使用 padding 屬性可以在輸入框中添加內(nèi)邊距。

CSS 實(shí)例

input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; }

運(yùn)行代碼 ?

注意我們?cè)O(shè)置了 box-sizing 屬性為 border-box。這樣可以確保瀏覽器呈現(xiàn)出帶有指定寬度和高度的輸入框是把邊框和內(nèi)邊距一起計(jì)算進(jìn)去的。
更多內(nèi)容可以閱讀 CSS3 框大小 。

輸入框(input) 邊框

使用 border 屬性可以修改 input 邊框的大小或顏色，使用 border-radius 屬性可以給 input 添加圓角：

CSS 實(shí)例

input[type=text] { border: 2px solid red; border-radius: 4px; }

運(yùn)行代碼 ?

如果你只想添加底部邊框可以使用 border-bottom 屬性:

CSS 實(shí)例

input[type=text] { border: none; border-bottom: 2px solid red; }

運(yùn)行代碼 ?

輸入框(input) 顏色

可以使用 background-color 屬性來(lái)設(shè)置輸入框的背景顏色，color 屬性用于修改文本顏色：

CSS 實(shí)例

input[type=text] { background-color: #3CBC8D; color: white; }

運(yùn)行代碼 ?

輸入框(input) 聚焦

默認(rèn)情況下，一些瀏覽器在輸入框獲取焦點(diǎn)時(shí)（點(diǎn)擊輸入框）會(huì)有一個(gè)藍(lán)色輪廓。我們可以設(shè)置 input 樣式為 outline: none; 來(lái)忽略該效果。

使用 :focus 選擇器可以設(shè)置輸入框在獲取焦點(diǎn)時(shí)的樣式：

CSS 實(shí)例

input[type=text]:focus { background-color: lightblue; }

運(yùn)行代碼 ?

CSS 實(shí)例

input[type=text]:focus { border: 3px solid #555; }

運(yùn)行代碼 ?

輸入框(input) 圖標(biāo)

如果你想在輸入框中添加圖標(biāo)，可以使用 background-image 屬性和用于定位的background-position 屬性。注意設(shè)置圖標(biāo)的左邊距，讓圖標(biāo)有一定的空間：

CSS 實(shí)例

input[type=text] { background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding-left: 40px; }

運(yùn)行代碼 ?

帶動(dòng)畫的搜索框

以下實(shí)例使用了 CSS transition 屬性，該屬性設(shè)置了輸入框在獲取焦點(diǎn)時(shí)會(huì)向右延展。你可以在 CSS 動(dòng)畫 章節(jié)查看更多內(nèi)容。

CSS 實(shí)例

input[type=text] { -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 100%; }

運(yùn)行代碼 ?

文本框（textarea）樣式

注意: 使用 resize 屬性來(lái)禁用文本框可以重置大小的功能（一般拖動(dòng)右下角可以重置大小）。

CSS 實(shí)例

textarea { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; resize: none; }

運(yùn)行代碼 ?

下拉菜單（select）樣式

CSS 實(shí)例

select { width: 100%; padding: 16px 20px; border: none; border-radius: 4px; background-color: #f1f1f1; }

運(yùn)行代碼 ?

按鈕樣式

CSS 實(shí)例

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; } /* 提示: 使用 width: 100% 設(shè)置全寬按鈕 */

運(yùn)行代碼 ?

更多內(nèi)容可以參考我們的 CSS 按鈕 教程。

響應(yīng)式表單

響應(yīng)式表單可以根據(jù)瀏覽器窗口的大小重新布局各個(gè)元素，我們可以通過(guò)重置瀏覽器窗口大小來(lái)查看效果：

高級(jí): 以下實(shí)例使用了CSS3 多媒體查詢 來(lái)創(chuàng)建一個(gè)響應(yīng)式表單。

CSS 實(shí)例

* { 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; } /* 清除浮動(dòng) */ .row:after { content: ""; display: table; clear: both; } /* 響應(yīng)式布局 layout - 在屏幕寬度小于 600px 時(shí)， 設(shè)置為上下堆疊元素 */ @media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] { width: 100%; margin-top: 0; } }

運(yùn)行代碼 ?
上一篇：CSS 屬性選擇器 下一篇：CSS 計(jì)數(shù)器