介紹
網頁表單是網站設計中常見的元素，從搜索表單字段到聯繫表單和複雜的數據篩選，涵蓋的範圍各不相同。了解如何使用CSS來為這些元素設計樣式並與其一起工作，有助於提供更好的解決方案，並改善您的網站用戶體驗。
本教程涵蓋了創建和設計從用戶那裡請求各種數據的網頁表單。該表單將使用文本字段、單選按鈕、复選框、下拉選項、文本區域以及提交和重置按鈕。您將通過重置具有外觀屬性的樣式，為表單設置自己一致的樣式，為文本字段添加佔位符答案，並使用各種虛擬類和虛擬元素自定義單選按鈕和复選框來創建和設計此表單及其元素。
先決條件
- 使用CSS查找並應用樣式於HTML元素的高級選擇器經驗。有關詳細信息，請查看CSS中使用ID、Class和Attribute選擇器的教程如何使用ID、Class和Attribute選擇器來選擇HTML元素。
- 熟悉CSS的框模型，您可以在CSS中處理框模型的教程中找到相關信息。
- 了解CSS中的偽類。查看CSS中使用鏈接和按鈕的狀態偽類以進行介紹。
- 在本地計算機上保存為
index.html的空HTML文件，您可以從您選擇的文本編輯器和網頁瀏覽器中訪問。要開始，請查看我們的如何設置您的HTML項目教程，並按照如何使用和理解HTML元素中的說明來查看您的HTML。如果您是HTML的新手，請嘗試整個使用HTML構建網站系列。
建立基本的 HTML 和 CSS
在此第一部分中，您將設置 HTML 和初始樣式，這些將貫穿整個教程。此 HTML 將建立頁面的基本結構，並創建稍後將進行樣式設置的表單字段。
首先，打開您的編輯器中的 index.html 文件。然後，添加以下 HTML 以提供文件的基本結構：
包含在 <head> 元素中的元素使用 <title> 元素定義了頁面的名稱，並通過 <link> 元素指定了要加載樣式表的位置。 <meta> 標籤定義了字符編碼，並指示瀏覽器如何在小屏幕設備上顯示網站。主要的表單內容將位於 <body> 和 <main> 標籤中。
接下來，在 <main> 元素內部，創建一個 <form> 元素。在 <form> 中，您將添加各種表單元素和 <div> 元素來幫助布局。在本教程中，從前幾個步驟的代碼中新增的部分會以突出顯示。將以下代碼塊中的突出顯示的 HTML 添加到您的 index.html 文件中：
HTML表单结构由相互连接的属性值组成，以便正确运行。此代码创建了一个表单，询问用户的姓名和电子邮件，询问他们喜欢的CSS编译器，以及是否了解CSS网格，并提供一个用于用户生成消息的字段，并有一个复选框，用于订阅新闻简报。要了解有关如何在HTML中构造表单的更多信息，请参阅 Mozilla Web Docs页面上的网络表单结构。
确保保存对index.html的更改，然后在相同目录中创建一个名为styles.css的新文件。
在文本编辑器中打开styles.css。此文件提供了浏览器将应用于index.html内容的样式。将以下CSS代码添加到您的styles.css文件中：
body 和 main 元素选择器创建了整个页面的初始文本样式和布局。 form 元素选择器为整个表单容器创建样式，然后使用 grid-template-columns: 1fr 1fr; 定义了由两列等大小的CSS网格。然后，gap: 2rem 在网格中的每行和列之间提供了2rem的间距。最后，.full-width 类选择器允许具有此类的容器在两列之间延伸，而不是保持在一列中。
保存更改到 styles.css。 接下来，打开您选择的网络浏览器。 在浏览器中选择 文件 菜单项，然后选择 打开 选项。 接下来，导航到您的项目文件夹并在浏览器中加载您的 index.html 文件。 以下图像演示了页面在浏览器中的呈现方式：
表单显示在白色框中，背景为浅灰色。 每个表单元素分散在网格中，前四个项目在两列之间交替显示，最后三个项目堆叠显示，跨越两列。 表单元素的默认样式与Firefox中显示的样式相同； 每个浏览器对表单元素的样式有不同的默认设置。
在本节中，您设置了与表单元素配合使用所需的初始HTML和CSS。 您还了解到每个浏览器以不同的方式处理这些元素的样式。 在下一节中，您将使用 appearance 属性来使所有浏览器中的表单元素样式一致。
使用 appearance 属性重置表单样式
每個瀏覽器以不同的方式處理表單元素的視覺樣式。通常，這些元素的樣式超出了 CSS 的初始能力，而是遵循操作系統或瀏覽器自己的設計語言的美學。為了為所有瀏覽器創建一致的樣式，在這個部分中，您將使用 appearance 屬性和其他屬性來移除默認的瀏覽器樣式。
首先，在您的文本編輯器中打開 styles.css。創建一個新的組選擇器，包括 button、fieldset、input、legend、select 和 textarea。然後，在選擇器塊內部，添加將 appearance 屬性設置為 none，如下面的代碼塊所示：
appearance 屬性是從表單元素中移除特殊樣式的預期方法。然而，由於此屬性的年齡和實現，大多數瀏覽器仍然需要在屬性名稱中添加供應商前綴。 供應商前綴 是一個特殊的代碼添加到屬性名稱前面，作為特定瀏覽器的識別符。對於 Chrome、Safari 和最新版本的 Edge 和 Opera，該前綴是 -webkit-。Firefox 使用 -moz- 前綴。
當使用供應商前綴時，將屬性的供應商前綴版本放在最前面，並以非前綴版本結尾是很重要的。這樣，只支援帶有前綴屬性的舊版瀏覽器將使用該前綴，但同時支援前綴和非前綴版本的新版瀏覽器將使用非前綴標準版本。在下面的代碼塊中添加突出顯示的前綴 appearance 屬性：
保存對 styles.css 的更改，然後在瀏覽器中打開 index.html。 appearance 屬性已刪除裝飾樣式，改為了更簡潔的樣式，如下圖所示：
appearance 屬性僅允許您更改特定於瀏覽器的樣式。 appearance: none 屬性值所做的最大更改是完全刪除了單選按鈕和核取方塊。對於其餘的表單元素，需要更多的屬性才能完全刪除默認樣式。在下面的代碼塊中突出顯示的 CSS 屬性添加了必要的樣式以刪除默認樣式：
此 CSS 刪除了背景顏色並重置了方塊模型的參數。並非所有這些樣式對所有元素都是必要的，但可以將這些重置樣式分組應用到所有元素上。
保存對 styles.css 的更改，然後在瀏覽器中刷新 index.html。表單元素已從頁面中視覺上消失，如下圖所示：
在這一節中，您使用了appearance和額外的屬性來完全移除了表單元素的默認樣式。您還使用了供應商前綴來適當地應用該屬性，以適應未來的瀏覽器版本。在下一節中，您將開始定製表單字段的視覺風格。
設置表單字段的一致樣式
現在默認的瀏覽器樣式已完全移除，您將對所有表單元素應用一致的自定義美學風格。這將涉及創建各種組選擇器，以定位特定的表單特性，以接收適當的樣式。
首先，打開您的文本編輯器中的styles.css。然後，創建一個包含input、select和textarea的組選擇器。添加以下代碼塊中突出顯示的樣式：
這些樣式在每個數據輸入元素周圍添加了2px的深灰色邊框，以及白色背景和圓角。
接下來，您將為包含文本的數據輸入元素應用樣式。您將使用屬性選擇器來指定要針對其type屬性值進行目標的input元素。以下代碼塊中的突出顯示的CSS提供了必要元素的樣式：
這些樣式應用了一致的字體大小和字族於所有元素。例如，<textarea>元素並不繼承自body元素的字體設置。display、box-sizing、width和padding屬性為每個數據輸入元素提供了一致的佈局和結構。
保存您對styles.css的更改，然後在Web瀏覽器中打開index.html。如下圖所示，這些字段現在周圍有一個更厚的深灰色邊框，<select>元素的文本現在更大：
接下來，還有兩個元素需要一些特殊的樣式，除了您已經編寫的廣泛樣式之外。第一個是為textarea增加更多的高度，第二個是為<select>元素應用自定義下拉箭頭。
返回到styles.css，並添加一個textarea元素選擇器。在選擇器塊內，創建一個min-height屬性，設置為10rem。這將為表單用戶創建一個較大的初始區域來填寫文本。下面代碼塊中突出顯示的CSS說明了如何編寫這個：
在為textarea添加樣式之後，要完成的下一件事是創建一個image目錄。這可以通過在命令提示符中運行以下命令來完成，命令提示符位於與您的index.html和styles.css文件相同的目錄中：
接下來，執行以下 curl 指令將第一個要處理的圖片下載到新的 images 目錄中：
你下載的圖片是一個 SVG，它是一種類似 HTML 的標記語言，用於繪製形狀。
要將這個新圖片添加到 <select> 元素中，返回到 styles.css。然後，創建一個 select 元素選擇器，並添加一個 background 屬性，其值來自以下代碼塊中的突出顯示部分：
這個 background 屬性將圖片加載到 <select> 元素的背景中，並且不重複顯示圖片。然後，它將圖片在垂直方向居中顯示，並從右側偏移 right 0.75rem。
保存你對 styles.css 的更改，然後返回到瀏覽器刷新頁面。現在，<textarea> 的高度大約是原來的兩倍，而 <select> 元素右側有一個藍色的向下箭頭。以下圖片展示了這在瀏覽器中的渲染效果：
在這一節中，你為表單的數據輸入元素創建了自定義的外觀。你還為 <select> 元素創建了一個背景，以替換默認的箭頭。在下一節中，你將創建自定義的單選按鈕和核取方塊，並在它們被選中時應用選中狀態。
使用:checked伪类自定义单选按钮和复选框
现在您已经创建了表单的基本外观，是时候将该视觉样式应用到单选按钮和复选框的交互input项目中了。
首先，在文本编辑器中打开styles.css。您将更改具有type属性为radio或checkbox的input元素，使其具有相等的高度和宽度值。然后，您将把单选按钮变成圆形。以下代码块的突出显示部分显示了格式：
vertical-align属性用于对齐内联文本项目。通过将其设置为middle，输入字段将位于文本对齐的中间。然后，具有border-radius属性为50%的单选输入将创建一个圆形，因为height和width是相同的。
保存您对styles.css的更改，然后在浏览器中打开index.html。两个单选按钮和复选框现在更大更明显，如下图所示渲染：
如果您與單選按鈕或勾選框進行交互，將不會看到任何可見變化。appearance 屬性還會移除這些輸入類型的選定指示器。接下來，您將使用 :checked 擬類別選擇器來應用樣式到選定的輸入項目。
返回到 styles.css 並創建一個新的選擇器，用於具有 :checked 擬類別的單選按鈕輸入。然後，在選擇器塊內，添加一個 background-image，帶有 radial-gradient，這樣就可以將填充樣式應用到選定的單選按鈕上。以下代碼塊中突出顯示的 CSS 顯示了格式：
calc() 函數允許在顏色值後設置 transparent 屬性為 1px，從而在輸入字段內創建一個實心藍色圓。
保存您對 styles.css 的更改，然後返回您瀏覽器中的 index.html。單選按鈕現在具有輸入字段內由白色包圍的實心藍色圓。以下圖像顯示了選定的是單選按鈕：
接下來，勾選框將使用背景圖像來指示其:checked 狀態，類似於 <select> 下拉菜單的箭頭。
運行以下 curl 命令將檢查標記圖像下載到您的 images 目錄中：
現在您已經下載並準備好使用圖像，返回到您的文本編輯器中的 styles.css。
接下來，添加一個附帶:checked虛類的input[type="checkbox"]選擇器。在選擇器區塊中，添加一個background屬性，該屬性加載check.svg圖像並將其縮小以適應框中。以下代碼塊中突出顯示的CSS指示了如何編寫此代碼：
background屬性值確保勾選圖像居中於容器中，不重複並按比例縮小75%。
保存更改到styles.css然後在瀏覽器中刷新頁面。選擇訂閱我們的新聞通訊勾選框時，現在內部會顯示一個勾選標記，如下圖所示：
在本節中，您創建了自定義單選按鈕和輸入字段，並通過使用:checked虛類使它們調整其選定狀態。在下一節中，您將設計頁面上的<label>和<legend>元素。
對標籤和圖例添加特殊樣式
接下來要設計的元素是表單中的<label>和<legend>元素。將使用兩種不同的樣式：單選按鈕和勾選框的小標籤樣式以及其餘元素的大標籤樣式。
打开你的文本编辑器中的index.html文件。你将为每个<label>和<legend>添加一个class属性，值为large-label或small-label，如下面的代码块中所示：
...
<form>
<div>
<label for="name" class="large-label">Name</label>
<input id="name" type="text" />
</div>
<div>
<label for="email" class="large-label">Email</label>
<input id="email" type="email" />
</div>
<div>
<label for="comp" class="large-label">Favorite CSS Compiler</label>
...
</div>
<div>
<fieldset>
<legend class="large-label">Are you familiar with CSS Grid?</legend>
<input type="radio" name="grid" id="yes" value="yes" />
<label for="yes" class="small-label">Yes</label>
<input type="radio" name="grid" id="no" value="no" />
<label for="no" class="small-label">No</label>
</fieldset>
</div>
<div class="full-width">
<label for="message" class="large-label">Message</label>
<textarea id="message"></textarea>
</div>
<div class="full-width">
<input type="checkbox" id="newsletter" />
<label for="newsletter" class="small-label">Receive our newsletter?</label>
</div>
...
</form>
...
保存这些修改到index.html，然后打开你的文本编辑器中的styles.css文件。
在styles.css中，添加一个.large-label类选择器，并添加以下属性，如下面的代码块中所示：
这些样式将large-label元素设置为大号和粗体，字体大小为1.5rem，相当于24px。然后margin-bottom属性为标签和其对应元素之间提供一些空间。
保存这些更改到styles.css，然后在你的网页浏览器中打开index.html。数据输入字段上方的标签文本将呈现为大号和粗体，如下图所示：
返回到styles.css，为.small-label创建另一个类选择器。因为这些是放置在单选按钮或复选框右侧的标签，它们需要一些不同的间距和大小样式。从以下代码块中添加下面的CSS到你的styles.css：
vertical-align: middle将会略微偏移文本。字体设置为1.25rem，相当于20px，使用sans-serif字体。左右的margin属性为输入字段和标签之间提供间距。
將更新保存到styles.css並在瀏覽器中刷新index.html。 現在，單選按鈕和核取方塊旁邊的標籤更大且提供更多間距，如下圖所示：
在這一部分中，您根據標籤相對於其輸入值的位置創建了兩種不同類型的樣式。 現在，標籤突出顯示，使表單在整個導航和可讀性方面更易於使用。 在下一部分中，您將通過使用placeholder屬性提供示例數據格式。
使用::placeholder偽元素提供占位符內容
在input或textarea元素上的占位符內容向表單使用者提供了關於所需信息類型以及如何格式化它的視覺演示。 placeholder屬性添加到HTML中，其值描述它。 然後，::placeholder偽元素允許自定義文本的外觀。
開始製作佔位符內容，請在您的文本編輯器中打開index.html。將<input />標記中的名稱文本、電子郵件<input />和<textarea>元素添加一個placeholder屬性。以下代碼塊中突出顯示的HTML指示了要添加placeholder以及要使用的值：
保存您對index.html的更改，然後在Web瀏覽器中打開該頁面。這三個文本輸入區域現在已經有內容。一旦選中這些文本輸入字段並添加了內容，瀏覽器將刪除占位符文本。以下圖像顯示了瀏覽器中預設佔位符樣式的外觀：
為了設置placeholder的樣式，請在您的文本編輯器中打開styles.css。為input::placeholder和textarea::placeholder添加一個群組選擇器。請確保在選擇器和虛擬元素之間使用雙冒號，因為這是瀏覽器識別偽類和偽元素之間差異的方式。以下代碼塊中突出顯示的CSS顯示了這樣的寫法：
需要注意的一點是，Firefox要求設置opacity值為1才能具有完整的顏色值。否則，Firefox會降低opacity，使文本顏色變暗，並根據顏色值導致可訪問的顏色對比問題。由於這僅限於Firefox，因此有一個注釋來解釋opacity屬性存在的目的。
將更改保存到 styles.css，然後返回瀏覽器以刷新 index.html。佔位文本現在與下拉箭頭和單選按鈕及复选框的選定狀態使用相同的藍色。以下圖片說明了瀏覽器如何渲染 placeholder 內容：
通過這一部分，您創建了文本輸入字段上的 placeholder 內容，並使用 ::placeholder 虛擬元素對其進行了樣式化。在下一部分中，您將為表單 <button> 元素創建自定義樣式。
創建交互式按鈕樣式
在 Web 表單中，<button> 元素通常用於提交或重置表單。在 index.html 中，有兩個按鈕，一個 type 為 submit，另一個為 reset。雖然兩者在功能上都很有用，但執行的操作卻是相反的。submit 按鈕會將表單發送到處理器，而 reset 按鈕會清除表單中的所有輸入數據。由於這些不同的操作，<button> 元素的外觀也需要有明顯的區別。
開始時，打開文本編輯器中的styles.css並創建button元素選擇器。在此選擇器塊中，您將添加在下面的代碼塊中突出顯示的submit和reset <button>元素之間共享的樣式：
font將兩個按鈕設置為具有相同的字體風格和大小。然後，border-radius為兩個按鈕添加了圓角。cursor屬性將光標樣式更改為手型指針。最後，padding屬性定義了按鈕內部周圍的空間。
保存對styles.css的更改，然後在Web瀏覽器中打開index.html。由於填充，按鈕中的文本將增大，文本之間的間距將在視覺上增加。以下圖像顯示了瀏覽器中按鈕的渲染：
接下來，返回到styles.css，通過使用定位每個按鈕type的屬性選擇器，為每個按鈕添加樣式。對於submit按鈕，添加藍色的background-color和white文本顏色。reset按鈕將獲得類似鏈接的下劃線和margin以增加按鈕之間的空間。將以下突出顯示的CSS添加到您的styles.css文件中：
保存這些添加到styles.css，然後在您的文本編輯器中刷新index.html。submit按鈕現在是突出的藍色和白色，而reset按鈕是淡化的帶下劃線的文本，如下圖所示渲染：
<button> 元素預設沒有 :hover 狀態，所以現在您要將其添加到您的樣式中。 :hover 狀態有助於讓游標使用者得到視覺反饋，指示游標位於按鈕上方。
要為這些 <button> 元素創建 :hover 狀態，請返回您的文本編輯器中的 styles.css。將 submit 按鈕的 backgound-color 設置為懸停時變暗。然後，當懸停時，使 reset 按鈕取消底線。以下代碼塊中突顯的 HTML 顯示了如何編寫這些樣式：
保存您對 styles.css 的更改，然後返回瀏覽器以刷新 index.html。正如以下動畫所示，當鼠標游標懸停在它們上方時，<button> 元素會變更其樣式：
在這一部分，您為 <button> 元素創建了樣式，以使它們的區別在視覺上明顯。您通過調整 cursor 屬性來更改游標懸停時的外觀。您還創建了自定義樣式，以應用於每個按鈕，以提供進一步的視覺反饋。在最後一節中，您將通過在使用 :focus 虛擬類別時創建樣式來提供進一步的視覺活動反饋。
使用 :focus 明確顯示活動表單字段
在填寫表格時，讓使用者知道他們目前正在填寫哪個欄位是很重要的。您可以使用:focus偽類來完成這個任務。預設情況下，瀏覽器會使用outline屬性來指示元素是否有:focus，但有時這可能不是一個明顯的指示，或者可能與設計的其他視覺方面不協調。在這一節中，您將創建一個符合您表單美感的自定義:focus狀態。
要開始處理表單字段:focus狀態，請在您的文本編輯器中打開styles.css。創建一個適用於input、select和textarea的組選擇器，並都使用:focus偽類，如下面的代碼塊所示：
這些樣式移除了瀏覽器默認的outline值，並將樣式替換為使用box-shadow屬性創建的厚藍色描邊。box-shadow的前三個值用於陰影的位置和模糊程度。第四個值稱為擴散程度，在這種情況下，它會在焦點元素周圍創建一個4px的描邊。
接下來，按鈕將獲得略有不同的焦點狀態，因為submit按鈕是相同的藍色。焦點狀態的目的和意圖是引起對焦點元素的注意，因此您將以不同的方式區分這些描邊。
將button:focus選擇器添加到styles.css中。在選擇器塊中，禁用默認的outline並添加box-shadow屬性。將放置、模糊和擴散值保持與輸入字段相同，但顏色將改為黑色，而不是藍色，如下面的代碼塊所示：
保存更改到styles.css並返回到您的瀏覽器。刷新index.html，並開始按Tab鍵使焦點在表單中的每個元素之間切換。以下動畫顯示了焦點隨著Tab鍵的更改而應用的焦點樣式：
在本部分中，您創建了焦點狀態樣式，為表單元素在焦點時提供清晰的視覺反饋。這種視覺樣式對於鼠標、觸摸和鍵盤輸入用戶都很有幫助。
結論
表單是網頁設計的常見元素。它們允許用戶與應用程序進行交互，搜索內容並提供反饋。在這個教程中，您創建並樣式化了一個完整的表單。您使用appearance屬性去除了瀏覽器的默認樣式，並在各種元素之間創建了新的自定義美學。您使用:checked虛擬類別為單選按鈕和复選框創建了已選擇的狀態。然後，您添加了placeholder內容並使用::placeholder虛擬元素匹配了樣式。在創建自定義按鈕樣式後，您應用了:focus樣式，為表單用戶提供了有價值的視覺交互反饋。
如果您想閱讀更多CSS教程，請嘗試閱讀如何使用CSS系列樣式化HTML的其他教程。
Source:
https://www.digitalocean.com/community/tutorials/how-to-style-common-form-elements-with-css