CSS中的input屬性是網頁開發中非常常用的一種元素,它可以讓我們輕松地創建各種不同類型的表單元素,比如文本框、密碼框、單選框、復選框等等。
input { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; } input[type=text], input[type=password] { /* 樣式 */ } input[type=checkbox], input[type=radio] { /* 樣式 */ } input[type=submit], input[type=reset], input[type=button] { /* 樣式 */ }
上面這段代碼是一個比較基礎的input樣式設置,其中有一些重點的屬性值,比如:
width
:表示元素的寬度,可以設置具體的值或者百分比padding
:表示元素內部的邊距,可以設置上、右、下、左四個方向的值margin
:表示元素外部的邊距,同樣可以設置上、右、下、左四個方向的值box-sizing
:表示元素的盒模型類型,有兩種取值content-box和border-boxborder
:表示元素的邊框,可以設置寬度、樣式、顏色等屬性border-radius
:表示元素的圓角半徑,可以設置一個或者四個屬性值
除此之外,我們還可以通過type
屬性來指定不同類型的input元素,比如:
text
:文本框password
:密碼框checkbox
:復選框radio
:單選框submit
:提交按鈕reset
:重置按鈕button
:普通按鈕
每一種類型的input元素都有自己特有的屬性和樣式,需要根據實際需求進行靈活設置。