CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>样式化 Web 表单 - 学习 Web 开发 | MDN</title><link rel="alternate" title="Styling web forms" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Styling_web_forms" hrefLang="en"/><link rel="alternate" title="Styling von Webformularen" href="https://developer.mozilla.org/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms" hrefLang="de"/><link rel="alternate" title="Estilizando formularios HTML" href="https://developer.mozilla.org/es/docs/Learn_web_development/Extensions/Forms/Styling_web_forms" hrefLang="es"/><link rel="alternate" title="Mise en forme des formulaires HTML" href="https://developer.mozilla.org/fr/docs/Learn_web_development/Extensions/Forms/Styling_web_forms" hrefLang="fr"/><link rel="alternate" title="ウェブフォームへのスタイル設定" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Extensions/Forms/Styling_web_forms" hrefLang="ja"/><link rel="alternate" title="Стили HTML форм" href="https://developer.mozilla.org/ru/docs/Learn_web_development/Extensions/Forms/Styling_web_forms" hrefLang="ru"/><link rel="alternate" title="样式化 Web 表单" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms" hrefLang="zh"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="在前几篇文章中，我们介绍了如何用 HTML 创建网页表单。现在，我们将介绍如何使用 CSS 来设置表单样式。"/><meta property="og:url" content="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms"/><meta property="og:title" content="样式化 Web 表单 - 学习 Web 开发 | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="zh_CN"/><meta property="og:description" content="在前几篇文章中，我们介绍了如何用 HTML 创建网页表单。现在，我们将介绍如何使用 CSS 来设置表单样式。"/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.4a78a219.js"></script><link href="/static/css/main.3d9e7a02.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-api document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/zh-CN/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/zh-CN/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/zh-CN/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/zh-CN/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/zh-CN/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/zh-CN/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/zh-CN/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/zh-CN/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/zh-CN/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/zh-CN/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/zh-CN/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/zh-CN/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/zh-CN/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/zh-CN/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/zh-CN/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/zh-CN/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/zh-CN/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/zh-CN/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FStyling_web_forms" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FStyling_web_forms" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn_web_development" class="breadcrumb" property="item" typeof="WebPage"><span property="name">学习 Web 开发</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Learn_web_development/Extensions" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Extension modules</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Web 表单构建块</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">样式化 Web 表单</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>中文 (简体)</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Learn_web_development/Extensions/Forms/Styling_web_forms" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="de" href="/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="es" href="/es/docs/Learn_web_development/Extensions/Forms/Styling_web_forms" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn_web_development/Extensions/Forms/Styling_web_forms" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn_web_development/Extensions/Forms/Styling_web_forms" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Learn_web_development/Extensions/Forms/Styling_web_forms" class="button submenu-item"><span>Русский</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard localized-content-note"><p><a href="/zh-CN/docs/MDN/Community/Contributing/Translated_content#活跃语言">此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">在本文中</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#表单微件样式设计的挑战">表单微件样式设计的挑战</a></li><li class="document-toc-item "><a class="document-toc-link" href="#对简单的表单微件进行样式设计">对简单的表单微件进行样式设计</a></li><li class="document-toc-item "><a class="document-toc-link" href="#一个具体的样式设计示例">一个具体的样式设计示例</a></li><li class="document-toc-item "><a class="document-toc-link" href="#技能测试">技能测试</a></li><li class="document-toc-item "><a class="document-toc-link" href="#总结">总结</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/zh-CN/docs/Learn_web_development/Getting_started">入门模块</a></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup">配置环境</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">安装基础软件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">浏览互联网</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors" class="only-in-en-us">Code editors</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">处理文件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">命令行速成课</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website">你的第一个网站</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">你的网站会是什么样子？</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML 基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS 基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript 基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">发布你的网站</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Getting_started/Web_standards" class="only-in-en-us">Web 标准</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">万维网是如何工作的</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">Web 和 Web 标准</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites" class="only-in-en-us">How browsers load websites</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills" class="only-in-en-us">软性技能</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning" class="only-in-en-us">Research and learning</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork" class="only-in-en-us">Collaboration and teamwork</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes" class="only-in-en-us">Workflows and processes</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews" class="only-in-en-us">Succeeding in job interviews</a></li></ol></details></li><li class="section"><a href="/en-US/docs/Learn_web_development/Core" class="only-in-en-us">核心模块</a></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content">使用 HTML 构建内容</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">开始学习 HTML</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">“头”里有什么——HTML 元信息</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">HTML 文本处理基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">强调与重要性</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Lists" class="only-in-en-us">Lists</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">文档与网站架构</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">文本格式进阶</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links">创建超链接</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">标记信件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">构建网页内容</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML 中的图片</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">视频和音频内容</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Mozilla 欢迎页面</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">HTML 表格基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">HTML 表格进阶特性和无障碍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">作业：构建行星数据</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms" class="only-in-en-us">Forms and buttons in HTML</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">HTML 调试</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics">CSS 样式基础</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">CSS 如何运行</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Getting_started">让我们开始 CSS 的学习之旅</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">运用你的新知识</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">CSS 选择器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">属性选择器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">伪类和伪元素</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Combinators">关系选择器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model">盒模型</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">层叠、优先级与继承</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS 值和单位</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Sizing">在 CSS 中调整大小</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">背景与边框</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Overflow">溢出的内容</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">图像、媒体和表单元素</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Tables">样式化表格</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">调试 CSS</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">基本的 CSS 理解</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">创建精美的信纸</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">一个漂亮的盒子</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling">CSS 文本样式</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Fundamentals">基本文本和字体样式</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_lists">为列表添加样式</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_links">样式化链接</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Web_fonts">Web 字体</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">作业：排版社区大学首页</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout">CSS 排版</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Introduction">介绍 CSS 布局</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Floats">浮动</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Positioning">定位</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Flexbox">弹性盒子</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Grids">网格</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">响应式设计</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Media_queries">媒体查询入门指南</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">作业：基本布局理解</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Scripting">使用 JavaScript 动态编码</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">什么是 JavaScript？</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/A_first_splash">JavaScript 初体验</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/What_went_wrong">查找并解决 JavaScript 代码的错误</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Variables">如何存储你需要的信息——变量</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Math">JavaScript 中的基础数学 — 数字和操作符</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Strings">文本处理——JavaScript 中的字符串</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods">有用的字符串方法</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays">数组</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Silly_story_generator">笑话生成器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals">在代码中做决定——条件语句</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Loops">循环吧，代码</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Functions">函数——可复用的代码块</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Build_your_own_function">创建你自己的函数</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Return_values">函数返回值</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Events">事件介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Event_bubbling">事件冒泡</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Image_gallery">图片库</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript 对象基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/DOM_scripting">DOM 脚本简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Network_requests">从服务器获取数据</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/JSON">使用 JSON</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">处理常见的 JavaScript 问题</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript 架构和库</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">客户端框架介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">框架的主要特性</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">React 入门</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">开始我们的 React 待办清单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_components">组件化我们的 React App</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state" class="only-in-en-us">React interactivity: Events and state</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering" class="only-in-en-us">React interactivity: Editing, filtering, conditional rendering</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility" class="only-in-en-us">Accessibility in React</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources" class="only-in-en-us">React resources</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility">无障碍</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">什么是无障碍？</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling">解决常见的无障碍问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML">HTML：无障碍的良好基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS 和 JavaScript 无障碍最佳实践</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA 基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/Multimedia">多媒体无障碍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/Mobile">移动端无障碍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">测验：无障碍疑难解答</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/Core/Design_for_developers" class="only-in-en-us">为开发人员设计</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Version_control">版本控制</a></li><li class="section"><a href="/en-US/docs/Learn_web_development/Extensions" class="only-in-en-us">扩展模块</a></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">对象原型</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">面向对象编程基本概念</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">JavaScript 中的类</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">实践对象构造</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">为“弹球”示例添加新功能</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs">客户端 Web API</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Web API 简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">视频和音频 API</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">绘图</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">客户端存储</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">第三方 API</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS">异步 JavaScript</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing">异步 JavaScript 简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Promises">如何使用 Promise</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">如何实现基于 Promise 的 API</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">worker 简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">序列动画</a></li></ol></details></li><li class="toggle"><details open=""><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms">Web 表单</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Your_first_form">创建我的第一个表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">如何构建 HTML 表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">原生表单部件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">HTML5 的输入（input）类型</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Other_form_controls">其他表单控件</a></li><li><em><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms" aria-current="page">样式化 Web 表单</a></em></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">表单样式化进阶</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI 伪类</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Form_validation">表单数据校验</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">发送表单数据</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools">理解客户端工具</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Overview">客户端工具概述</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">软件包管理基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">介绍完整的工具链</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">部署我们的应用</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side">服务端网站</a></summary><ol><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps">服务端基础</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">服务端编程介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">客户端服务端交互概述</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">服务端 web 框架</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">站点安全</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django">Django web 框架（Python）</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Django 介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">设置 Django 开发环境</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django Tutorial Part 2: 创建网站的地基</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Models">Django Tutorial Part 3: 使用模型</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site">Django Tutorial Part 4: Django 管理员站点</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Home_page">Django 教程 5：主页构建</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views">Django 教程 6: 通用列表和详细信息视图</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Sessions">Django 教程 7: 会话框架</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Authentication">Django 教程 8：用户授权与许可</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Forms">Django 教程 9: 使用表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Testing">Django 教程 10: 测试 Django 网页应用</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Deployment">Django 教程 11：部署 Django 到生产环境</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security">Django Web 应用安全</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog">评估：DIY Django 微博客</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express web 框架（Node.js）</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Express/Node 入门</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">设置 Node 开发环境</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express 教程：本地图书馆网站</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express 教程 2：创建站点框架</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express 教程 3：使用数据库 (Mongoose)</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes">Express 教程 4：路由和控制器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express 教程 5: 呈现图书馆数据</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express 教程 6: 使用表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment">Express 教程 7：部署到生产环境</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance">Web 性能</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/why_web_performance">Web 性能的重要性</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">什么是 web 性能？</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/Perceived_performance">感知性能</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance">测量性能</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/Multimedia">多媒体：图片</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/video">多媒体：视频</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript 性能优化</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/HTML">HTML 性能优化</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/CSS">CSS 性能优化</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">web 性能的商业案例</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing">测试</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Introduction">跨浏览器测试介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Testing_strategies">测试的策略</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">处理常见的 HTML 和 CSS 问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Feature_detection">实现特性检测</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Automated_testing">自动化测试简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">搭建自己的自动化测试环境</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Transform_animate" class="only-in-en-us">CSS 变换与动画化</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Security_privacy" class="only-in-en-us">安全与隐私</a></li><li class="section">更多资源</li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Howto">如何解决常见问题</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Howto/Solve_HTML_problems">使用 HTML 解决常见问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Solve_CSS_problems">解决常见的 CSS 问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Solve_JavaScript_problems">解决 JavaSctript 代码的常见问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Web_mechanics">Web 机制</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup">工具和安装</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Design_and_accessibility">设计与无障碍</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/About" class="only-in-en-us">关于</a></li><li><a href="/en-US/docs/Learn_web_development/Educators" class="only-in-en-us">面向教育工作者的资源</a></li><li><a href="/en-US/docs/Learn_web_development/Changelog" class="only-in-en-us">更新日志</a></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">在本文中</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#表单微件样式设计的挑战">表单微件样式设计的挑战</a></li><li class="document-toc-item "><a class="document-toc-link" href="#对简单的表单微件进行样式设计">对简单的表单微件进行样式设计</a></li><li class="document-toc-item "><a class="document-toc-link" href="#一个具体的样式设计示例">一个具体的样式设计示例</a></li><li class="document-toc-item "><a class="document-toc-link" href="#技能测试">技能测试</a></li><li class="document-toc-item "><a class="document-toc-link" href="#总结">总结</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="zh-CN"><header><h1>样式化 Web 表单</h1></header><div class="section-content"><ul class="prev-next"><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Other_form_controls"><span class="button-wrap"> 上一页 </span></a></li><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Extensions/Forms"><span class="button-wrap"> 概述：Web 表单构建块</span></a></li><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling"><span class="button-wrap"> 下一页 </span></a></li></ul> <p>在前几篇文章中，我们介绍了如何用 HTML 创建网页表单。现在，我们将介绍如何使用 <a href="/zh-CN/docs/Web/CSS">CSS</a> 来设置表单样式。</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">前提：</th> <td> 对 <a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content">HTML</a> 和 <a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics">CSS</a> 的基本理解。 </td> </tr> <tr> <th scope="row">目标：</th> <td> 了解样式化表单背后的问题，学习一些实用的基本样式技术。 </td> </tr> </tbody> </table></figure></div><section aria-labelledby="表单微件样式设计的挑战"><h2 id="表单微件样式设计的挑战"><a href="#表单微件样式设计的挑战">表单微件样式设计的挑战</a></h2><div class="section-content"></div></section><section aria-labelledby="历史"><h3 id="历史"><a href="#历史">历史</a></h3><div class="section-content"><p>1995 年，<a href="https://www.ietf.org/rfc/rfc1866.txt" class="external" target="_blank">HTML 2 规范</a>引入了表单控件（又称“表单微件”或“表单元素”）。但 CSS 直到 1996 年底才发布，而且大多数浏览器在几年后才支持 CSS；因此，在此期间，浏览器依赖底层操作系统来渲染表单部件。</p> <p>即使有了 CSS，浏览器供应商起初也不愿意让表单元素具有样式，因为用户已经习惯了各自浏览器的外观。但现在情况已经发生了变化，除了少数例外情况，表单部件现在大部分都是可样式化的。</p></div></section><section aria-labelledby="微件类型"><h3 id="微件类型"><a href="#微件类型">微件类型</a></h3><div class="section-content"><h4 id="易于样式化">易于样式化</h4> <ol> <li><a href="/zh-CN/docs/Web/HTML/Element/form"><code><form></code></a></li> <li><a href="/zh-CN/docs/Web/HTML/Element/fieldset"><code><fieldset></code></a> 和 <a href="/zh-CN/docs/Web/HTML/Element/legend"><code><legend></code></a></li> <li>单行文本 <a href="/zh-CN/docs/Web/HTML/Element/input"><code><input></code></a>（如输入文本、url、电子邮件），但 <a href="/zh-CN/docs/Web/HTML/Element/input/search"><code><input type="search"></code></a> 除外。</li> <li>多行文本 <a href="/zh-CN/docs/Web/HTML/Element/textarea"><code><textarea></code></a></li> <li>按钮（包括 <a href="/zh-CN/docs/Web/HTML/Element/input"><code><input></code></a> 和 <a href="/zh-CN/docs/Web/HTML/Element/button"><code><button></code></a>）</li> <li><a href="/zh-CN/docs/Web/HTML/Element/label"><code><label></code></a></li> <li><a href="/zh-CN/docs/Web/HTML/Element/output"><code><output></code></a></li> </ol> <h4 id="难以样式化">难以样式化</h4> <ul> <li>复选框和单选按钮</li> <li><a href="/zh-CN/docs/Web/HTML/Element/input/search"><code><input type="search"></code></a></li> </ul> <p><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">表单样式化进阶</a>一文介绍了如何设置这些样式。</p> <h4 id="仅靠_css_无法对内部结构进行样式设计">仅靠 CSS 无法对内部结构进行样式设计</h4> <ul> <li><a href="/zh-CN/docs/Web/HTML/Element/input/color"><code><input type="color"></code></a></li> <li>与日期相关的控件，如 <a href="/zh-CN/docs/Web/HTML/Element/input/datetime-local"><code><input type="datetime-local"></code></a></li> <li><a href="/zh-CN/docs/Web/HTML/Element/input/range"><code><input type="range"></code></a></li> <li><a href="/zh-CN/docs/Web/HTML/Element/input/file"><code><input type="file"></code></a></li> <li>涉及到创建下拉部件的元素，包括 <a href="/zh-CN/docs/Web/HTML/Element/select"><code><select></code></a>、<a href="/zh-CN/docs/Web/HTML/Element/option"><code><option></code></a>、<a href="/zh-CN/docs/Web/HTML/Element/optgroup"><code><optgroup></code></a> 和 <a href="/zh-CN/docs/Web/HTML/Element/datalist"><code><datalist></code></a>。</li> <li><a href="/zh-CN/docs/Web/HTML/Element/progress"><code><progress></code></a> 和 <a href="/zh-CN/docs/Web/HTML/Element/meter"><code><meter></code></a></li> </ul> <p>例如，日期选择器的日历和点击时会显示选项列表的 <select> 按钮不能仅使用 CSS 进行样式设计。</p> <p><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">表单样式化进阶</a>和<a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls">如何构建自定义表单控件</a>两篇文章介绍了如何设置这些样式。</p> <div class="notecard note"> <p><strong>备注：</strong> 一些专有的 CSS 伪元素（如 <a href="/en-US/docs/Web/CSS/::-moz-range-track" class="only-in-en-us"><code>::-moz-range-track</code></a>）可以为此类内部组件设计样式，但它们在不同浏览器之间并不一致，因此并不十分可靠。我们稍后会提到。</p> </div></div></section><section aria-labelledby="对简单的表单微件进行样式设计"><h2 id="对简单的表单微件进行样式设计"><a href="#对简单的表单微件进行样式设计">对简单的表单微件进行样式设计</a></h2><div class="section-content"><p>可以使用<a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Your_first_form">你的首个表单</a>和 <a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics">CSS 构建</a>文章中的技术对上一节中“易于样式化”的微件进行样式设计。还有一些特殊的选择器——<a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI 伪类</a>——可以根据用户界面的当前状态来设计样式。</p> <p>我们将在本文结尾举例说明，但首先，这里有一些值得了解的表单样式的特殊方面。</p></div></section><section aria-labelledby="字体和文本"><h3 id="字体和文本"><a href="#字体和文本">字体和文本</a></h3><div class="section-content"><p>CSS 字体和文本功能可轻松用于任何微件（是的，可以将 <a href="/zh-CN/docs/Web/CSS/@font-face"><code>@font-face</code></a> 用于表单微件）。不过，浏览器的行为往往不一致。默认情况下，某些微件不会从其父代继承 <a href="/zh-CN/docs/Web/CSS/font-family"><code>font-family</code></a> 和 <a href="/zh-CN/docs/Web/CSS/font-size"><code>font-size</code></a>。许多浏览器会使用系统默认的外观。为了使表单的外观与其他内容保持一致，可以在样式表中添加以下规则：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>button, input, select, textarea { font-family: inherit; font-size: 100%; } </code></pre></div> <p><a href="/zh-CN/docs/Web/CSS/inherit"><code>inherit</code></a> 属性值会使属性值与其父元素属性的计算值相匹配；继承父元素的值。</p> <p>下面的截图显示了两者的区别。左边是 MacOS 上 Chrome 浏览器中 <code><input type="text"></code>、<code><input type="date"></code>、<a href="/zh-CN/docs/Web/HTML/Element/select"><code><select></code></a>、<a href="/zh-CN/docs/Web/HTML/Element/textarea"><code><textarea></code></a>、<code><input type="submit"></code> 和 <code><button></code> 的默认渲染结果，使用的是该平台的默认字体样式。右边是应用了上述样式规则的相同元素。</p> <p><img src="/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms/forms_fontfamily.png" alt="具有默认和继承字体系列的表单控件。默认情况下，有些类型是有衬线字体，有些是无衬线字体。继承应将所有类型的字体更改为父类的字体族，在本例中就是段落。奇怪的是，提交类型的输入并不继承父级段落。" width="483" height="260" loading="lazy"></p> <p>默认设置在许多方面存在差异。继承者应将其字体更改为父代的字体家族——在本例中，即父代容器的默认衬线字体。它们都能做到，但有一个奇怪的例外——在 Chrome 浏览器中，<code><input type="submit"></code> 不能从父段落继承。相反，它使用 <a href="/zh-CN/docs/Web/CSS/font-family#values"><code>font-family: system-ui</code></a>。这也是使用 <code><button></code> 元素而非等价 input 类型的另一个原因！</p> <p>关于使用系统默认样式的表单更好看，还是使用为匹配的内容而设计的自定义样式的表单更好看，有很多争论。作为网站或 Web 应用程序的设计者，你可以自行决定。</p></div></section><section aria-labelledby="盒子尺寸"><h3 id="盒子尺寸"><a href="#盒子尺寸">盒子尺寸</a></h3><div class="section-content"><p>所有文本字段都完全支持 CSS 盒模型的所有相关属性，例如 <a href="/zh-CN/docs/Web/CSS/width"><code>width</code></a>、<a href="/zh-CN/docs/Web/CSS/height"><code>height</code></a>、<a href="/zh-CN/docs/Web/CSS/padding"><code>padding</code></a>、<a href="/zh-CN/docs/Web/CSS/margin"><code>margin</code></a> 以及 <a href="/zh-CN/docs/Web/CSS/border"><code>border</code></a>。不过，和以前一样，浏览器在显示这些微件时会依赖系统默认样式。你可以自行定义如何将它们融入内容。如果你想保持这些部件的原生观感，那么如果你想给它们一个一致的大小，就会遇到一点困难。</p> <p><strong>这是因为每个微件都有自己的边框、外边距和内边距规则</strong>。要为多个不同的微件提供相同的尺寸，可以使用 <a href="/zh-CN/docs/Web/CSS/box-sizing"><code>box-sizing</code></a> 属性以及其他属性的一些一致值：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>input, textarea, select, button { width: 150px; padding: 0; margin: 0; box-sizing: border-box; } </code></pre></div> <p>在下面的截图中，左栏显示了 <code><input type="radio"></code>、<code><input type="checkbox"></code>、<code><input type="range"></code>、<code><input type="text"></code>、<code><input type="date"></code>、<a href="/zh-CN/docs/Web/HTML/Element/select"><code><select></code></a>、<a href="/zh-CN/docs/Web/HTML/Element/textarea"><code><textarea></code></a>、<code><input type="submit"></code>和 <a href="/zh-CN/docs/Web/HTML/Element/button"><code><button></code></a> 的默认渲染结果。右栏则显示了应用了上述规则的相同元素。请注意，尽管平台对每种微件都有默认规则，但我们仍能确保所有元素占用相同的空间。</p> <p><img src="/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms/boxmodel_formcontrols1.png" alt="盒模型对大多数 input 类型有效。" width="359" height="365" loading="lazy"></p> <p>从截图中可能看不出的是，单选框和复选框控件看起来还是一样的，但它们的居中位置是 <a href="/zh-CN/docs/Web/CSS/width"><code>width</code></a> 属性提供的 150px 水平空间。其他浏览器可能不会将控件居中，但它们会遵守分配的空间。</p></div></section><section aria-labelledby="图例摆放"><h3 id="图例摆放"><a href="#图例摆放">图例摆放</a></h3><div class="section-content"><p><a href="/zh-CN/docs/Web/HTML/Element/legend"><code><legend></code></a> 元素的样式设计没问题，但要控制它的位置就有点麻烦了。默认情况下，它总是位于 <a href="/zh-CN/docs/Web/HTML/Element/fieldset"><code><fieldset></code></a> 父元素的顶部边框上方，靠近左上角。如果要将其置于其他位置，例如 fieldset 内部或左下角附近，则需要依靠定位。</p> <p>看看下面这个示例：</p> <iframe width="100%" height="400" src="https://mdn.github.io/learning-area/html/forms/native-form-widgets/positioned-legend.html" loading="lazy"></iframe> <p>为了以这种方式定位图例，我们使用了以下 CSS（为简洁起见，删除了其他声明）：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>fieldset { position: relative; } legend { position: absolute; bottom: 0; right: 0; } </code></pre></div> <p><code><fieldset></code> 也需要定位，以便使 <code><legend></code> 相对于它定位（否则 <code><legend></code> 将相对于 <code><body></code> 定位）。</p> <p><a href="/zh-CN/docs/Web/HTML/Element/legend"><code><legend></code></a> 元素对于无障碍辅助功能非常重要，它将作为字段集内每个表单元素标签的一部分被辅助技术识别，但使用类似上述的技术也没有问题。图例内容仍将以相同的方式显示，只是视觉位置发生了变化。</p> <div class="notecard note"> <p><strong>备注：</strong> 也可以使用 <a href="/zh-CN/docs/Web/CSS/transform"><code>transform</code></a> 属性来辅助定位 <code><legend></code>。但是，当使用 <code>transform: translateY();</code> 等属性定位时，它虽然移动了，但却在 <code><fieldset></code> 边框中留下了一个难看的缺口，而且很难消除。</p> </div></div></section><section aria-labelledby="一个具体的样式设计示例"><h2 id="一个具体的样式设计示例"><a href="#一个具体的样式设计示例">一个具体的样式设计示例</a></h2><div class="section-content"><p>让我们来看一个如何为 HTML 表单设计样式的具体示例。我们将制作一个外观精美的“明信片”联系表单；<a href="https://mdn.github.io/learning-area/html/forms/postcard-example/" class="external" target="_blank">请参见此处的完成版</a>。</p> <p>如果你想学习这个示例，请将我们的 <a href="https://github.com/mdn/learning-area/blob/main/html/forms/postcard-example/postcard-start.html" class="external" target="_blank">postcard-start.html 文件</a>拷贝到本地，然后按照下面的说明操作。</p></div></section><section aria-labelledby="html"><h3 id="html"><a href="#html">HTML</a></h3><div class="section-content"><p>与我们在<a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Your_first_form">本指南第一篇文章</a>中使用的示例相比，HTML 只是稍微复杂一些；它只是多了几个 ID 和一个标题。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><form> <h1>to: Mozilla</h1> <div id="from"> <label for="name">from:</label> <input type="text" id="name" name="user_name" /> </div> <div id="reply"> <label for="mail">reply:</label> <input type="email" id="mail" name="user_email" /> </div> <div id="message"> <label for="msg">Your message:</label> <textarea id="msg" name="user_message"></textarea> </div> <div class="button"> <button type="submit">Send your message</button> </div> </form> </code></pre></div> <p>将以上代码添加到 HTML 的 body 部分。</p></div></section><section aria-labelledby="整理资源文件"><h3 id="整理资源文件"><a href="#整理资源文件">整理资源文件</a></h3><div class="section-content"><p>这就是有趣的开始！在开始编码之前，我们还需要三种额外的资源：</p> <ol> <li><a href="background.jpg">明信片背景</a>——下载该图片，并将其保存在与需要处理的 HTML 文件相同的目录下。</li> <li>打字机字体：<a href="https://www.dafont.com/moms-typewriter.font?back=theme" class="external" target="_blank">来自 dafont.com 的“Mom's Typewriter”字体</a>——将 TTF 文件下载到与上述相同的目录中。</li> <li>手绘字体：<a href="https://www.dafont.com/journal.font" class="external" target="_blank">来自 dafont.com 的“Journal”字体</a>——将 TTF 文件下载到与上述相同的目录中。</li> </ol> <p>在开始使用之前，你的字体还需要进一步处理：</p> <ol> <li>访问 fontsquirrel.com 的 <a href="https://www.fontsquirrel.com/tools/webfont-generator" class="external" target="_blank">Web 字体生成器</a>工具。</li> <li>使用表单上传字体文件，生成 Web 字体工具包。将该工具包下载到你的电脑上。</li> <li>解压缩提供的压缩文件。</li> <li>在解压后的内容中，你会发现一些字体文件（在撰写本文时，有两个 <code>.woff</code> 文件和两个 <code>.woff2</code> 文件；将来可能会有变化）。将这些文件复制到一个名为 fonts 的目录中，该目录与之前的目录相同。我们为每种字体使用了两个不同的文件，以最大限度地提高浏览器兼容性；请参阅我们的 <a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Web_fonts">Web 字体</a>文章，了解更多信息。</li> </ol></div></section><section aria-labelledby="css"><h3 id="css"><a href="#css">CSS</a></h3><div class="section-content"><p>现在，我们可以为示例编写 CSS。在 <a href="/zh-CN/docs/Web/HTML/Element/style"><code><style></code></a> 元素内逐一添加下图所示的所有代码块。</p> <h4 id="总体布局">总体布局</h4> <p>首先，我们要定义 <a href="/zh-CN/docs/Web/CSS/@font-face"><code>@font-face</code></a> 规则，并在 <a href="/zh-CN/docs/Web/HTML/Element/body"><code><body></code></a> 和 <a href="/zh-CN/docs/Web/HTML/Element/form"><code><form></code></a> 元素上设置所有基本样式。如果 fontsquirrel 的输出与我们上面描述的不同，可以在下载的 Web 字体工具包的 <code>stylesheet.css</code> 文件中找到正确的 <code>@font-face</code> 块（需要用它们替换下面的 <code>@font-face</code> 块，并更新字体文件的路径）：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>@font-face { font-family: "handwriting"; src: url("fonts/journal-webfont.woff2") format("woff2"), url("fonts/journal-webfont.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "typewriter"; src: url("fonts/momot___-webfont.woff2") format("woff2"), url("fonts/momot___-webfont.woff") format("woff"); font-weight: normal; font-style: normal; } body { font: 1.3rem sans-serif; padding: 0.5em; margin: 0; background: #222; } form { position: relative; width: 740px; height: 498px; margin: 0 auto; padding: 1em; box-sizing: border-box; background: #fff url(background.jpg); /* we create our grid */ display: grid; grid-gap: 20px; grid-template-columns: repeat(2, 1fr); grid-template-rows: 10em 1em 1em 1em; } </code></pre></div> <p>请注意，我们使用了 <a href="/zh-CN/docs/Web/CSS/CSS_grid_layout">CSS 网格</a>和<a href="/zh-CN/docs/Web/CSS/CSS_flexible_box_layout">弹性盒</a>来布局表单。这样，我们就可以轻松定位元素，包括标题和所有表单元素：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>h1 { font: 1em "typewriter", monospace; align-self: end; } #message { grid-row: 1 / 5; } #from, #reply { display: flex; } </code></pre></div> <h4 id="标签与控件">标签与控件</h4> <p>现在，我们可以开始处理表单元素本身了。首先，确保 <a href="/zh-CN/docs/Web/HTML/Element/label"><code><label></code></a> 的字体正确：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>label { font: 0.8em "typewriter", sans-serif; } </code></pre></div> <p>文本字段需要一些通用规则。换句话说，我们删除了它们的 <a href="/zh-CN/docs/Web/CSS/border"><code>border</code></a> 和 <a href="/zh-CN/docs/Web/CSS/background"><code>background</code></a>，并重新定义了它们的 <a href="/zh-CN/docs/Web/CSS/padding"><code>padding</code></a> 和 <a href="/zh-CN/docs/Web/CSS/margin"><code>margin</code></a>：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>input, textarea { font: 1.4em/1.5em "handwriting", cursive, sans-serif; border: none; padding: 0 10px; margin: 0; width: 80%; background: none; } </code></pre></div> <p>当其中一个字段获得焦点时，我们会用浅灰色透明背景来突出显示它们（为了便于使用和键盘无障碍，焦点样式总是很重要的）：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>input:focus, textarea:focus { background: rgb(0 0 0 / 10%); border-radius: 5px; } </code></pre></div> <p>现在我们的文本字段已经完成，我们需要调整单行和多行文本字段的显示方式，使其匹配，因为使用默认设置时，它们的显示方式通常不会相同。</p> <h4 id="调整_textarea">调整 textarea</h4> <p><a href="/zh-CN/docs/Web/HTML/Element/textarea"><code><textarea></code></a> 元素默认渲染为 inline-block 元素。这里最重要的是 <a href="/zh-CN/docs/Web/CSS/resize"><code>resize</code></a> 和 <a href="/zh-CN/docs/Web/CSS/overflow"><code>overflow</code></a> 属性。虽然我们的设计为固定尺寸，我们可以使用 <code>resize</code> 属性来阻止用户调整多行文本字段的大小，但最好不要阻止用户调整文本区域的大小（如果他们愿意的话）。<a href="/zh-CN/docs/Web/CSS/overflow"><code>overflow</code></a> 属性用于使字段在不同浏览器中的呈现更加一致。有些浏览器默认值为 <code>auto</code>，而有些浏览器默认值为 <code>scroll</code>。在我们的示例中，最好确保每个人都使用 <code>auto</code>：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>textarea { display: block; padding: 10px; margin: 10px 0 0 -10px; width: 100%; height: 90%; border-right: 1px solid; /* resize : none; */ overflow: auto; } </code></pre></div> <h4 id="对提交按钮进行样式设计">对提交按钮进行样式设计</h4> <p><a href="/zh-CN/docs/Web/HTML/Element/button"><code><button></code></a> 元素非常便于使用 CSS 进行样式设计；你可以随心所欲，甚至可以使用<a href="/zh-CN/docs/Web/CSS/Pseudo-elements">伪元素</a>进行设置：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>button { padding: 5px; font: bold 0.6em sans-serif; border: 2px solid #333; border-radius: 5px; background: none; cursor: pointer; transform: rotate(-1.5deg); } button:after { content: " >>>"; } button:hover, button:focus { background: #000; color: #fff; } </code></pre></div></div></section><section aria-labelledby="最终结果"><h3 id="最终结果"><a href="#最终结果">最终结果</a></h3><div class="section-content"><p>瞧！你的表单现在应该是这样的：</p> <p><img src="/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms/updated-form-screenshot.jpg" alt="如上所述应用所有样式和调整后表单的最终外观和布局" width="740" height="497" loading="lazy"></p> <div class="notecard note"> <p><strong>备注：</strong> 如果你的示例没有像你预期的那样工作，你想将它同我们的版本检查对比，你可以在 Github 上找到它——查看<a href="https://mdn.github.io/learning-area/html/forms/postcard-example/" class="external" target="_blank">在线演示</a>（也可以查看<a href="https://github.com/mdn/learning-area/tree/main/html/forms/postcard-example" class="external" target="_blank">源代码</a>）。</p> </div></div></section><section aria-labelledby="技能测试"><h2 id="技能测试"><a href="#技能测试">技能测试</a></h2><div class="section-content"><p>本文已经结束，但你还记得最重要的信息吗？在继续学习之前，还可以通过一些测试来验证自己是否记住了这些信息——请参阅<a href="/en-US/docs/Learn_web_development/Extensions/Forms/Test_your_skills:_Styling_basics" class="only-in-en-us">技能测试：样式化基础</a>。</p></div></section><section aria-labelledby="总结"><h2 id="总结"><a href="#总结">总结</a></h2><div class="section-content"><p>正如你所看到的，只要我们想创建只有文本字段和按钮的表单，就很容易使用 CSS 对其进行样式设置。<a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">下一篇文章中</a>，我们将会看到如何处理落入“不好的”和“丑陋的”分类的表单微件。</p> <ul class="prev-next"><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Other_form_controls"><span class="button-wrap"> 上一页 </span></a></li><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Extensions/Forms"><span class="button-wrap"> 概述：Web 表单构建块</span></a></li><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling"><span class="button-wrap"> 下一页 </span></a></li></ul></div></section><section aria-labelledby="进阶内容"><h3 id="进阶内容"><a href="#进阶内容">进阶内容</a></h3><div class="section-content"><ul> <li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls">如何构建自定义表单控件</a></li> <li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Sending_forms_through_JavaScript">通过 JavaScript 发送表单</a></li> <li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms">表单控件的属性兼容性列表</a></li> </ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/translated-content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2024-12-21T09:57:08.000Z">2024年12月21日</time> by <a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content/blob/main/files/zh-cn/learn_web_development/extensions/forms/styling_web_forms/index.md?plain=1" title="Folder: zh-cn/learn_web_development/extensions/forms/styling_web_forms (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/translated-content/issues/new?template=page-report-zh-cn.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FStyling_web_forms&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60zh-cn%2Flearn_web_development%2Fextensions%2Fforms%2Fstyling_web_forms%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FStyling_web_forms%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fzh-cn%2Flearn_web_development%2Fextensions%2Fforms%2Fstyling_web_forms%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2F1d06b61e7057d21515fd81694c2280905735a571%0A*+Document+last+modified%3A+2024-12-21T09%3A57%3A08.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/zh-CN/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Other_form_controls\"><span class=\"button-wrap\"> 上一页 </span></a></li><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms\"><span class=\"button-wrap\"> 概述：Web 表单构建块</span></a></li><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\"><span class=\"button-wrap\"> 下一页 </span></a></li></ul>\n<p>在前几篇文章中，我们介绍了如何用 HTML 创建网页表单。现在，我们将介绍如何使用 <a href=\"/zh-CN/docs/Web/CSS\">CSS</a> 来设置表单样式。</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">前提：</th>\n <td>\n 对 <a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content\">HTML</a> 和 <a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics\">CSS</a> 的基本理解。\n </td>\n </tr>\n <tr>\n <th scope=\"row\">目标：</th>\n <td>\n 了解样式化表单背后的问题，学习一些实用的基本样式技术。\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"表单微件样式设计的挑战","title":"表单微件样式设计的挑战","isH3":false,"content":""}},{"type":"prose","value":{"id":"历史","title":"历史","isH3":true,"content":"<p>1995 年，<a href=\"https://www.ietf.org/rfc/rfc1866.txt\" class=\"external\" target=\"_blank\">HTML 2 规范</a>引入了表单控件（又称“表单微件”或“表单元素”）。但 CSS 直到 1996 年底才发布，而且大多数浏览器在几年后才支持 CSS；因此，在此期间，浏览器依赖底层操作系统来渲染表单部件。</p>\n<p>即使有了 CSS，浏览器供应商起初也不愿意让表单元素具有样式，因为用户已经习惯了各自浏览器的外观。但现在情况已经发生了变化，除了少数例外情况，表单部件现在大部分都是可样式化的。</p>"}},{"type":"prose","value":{"id":"微件类型","title":"微件类型","isH3":true,"content":"<h4 id=\"易于样式化\">易于样式化</h4>\n<ol>\n<li><a href=\"/zh-CN/docs/Web/HTML/Element/form\"><code><form></code></a></li>\n<li><a href=\"/zh-CN/docs/Web/HTML/Element/fieldset\"><code><fieldset></code></a> 和 <a href=\"/zh-CN/docs/Web/HTML/Element/legend\"><code><legend></code></a></li>\n<li>单行文本 <a href=\"/zh-CN/docs/Web/HTML/Element/input\"><code><input></code></a>（如输入文本、url、电子邮件），但 <a href=\"/zh-CN/docs/Web/HTML/Element/input/search\"><code><input type=\"search\"></code></a> 除外。</li>\n<li>多行文本 <a href=\"/zh-CN/docs/Web/HTML/Element/textarea\"><code><textarea></code></a></li>\n<li>按钮（包括 <a href=\"/zh-CN/docs/Web/HTML/Element/input\"><code><input></code></a> 和 <a href=\"/zh-CN/docs/Web/HTML/Element/button\"><code><button></code></a>）</li>\n<li><a href=\"/zh-CN/docs/Web/HTML/Element/label\"><code><label></code></a></li>\n<li><a href=\"/zh-CN/docs/Web/HTML/Element/output\"><code><output></code></a></li>\n</ol>\n<h4 id=\"难以样式化\">难以样式化</h4>\n<ul>\n<li>复选框和单选按钮</li>\n<li><a href=\"/zh-CN/docs/Web/HTML/Element/input/search\"><code><input type=\"search\"></code></a></li>\n</ul>\n<p><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">表单样式化进阶</a>一文介绍了如何设置这些样式。</p>\n<h4 id=\"仅靠_css_无法对内部结构进行样式设计\">仅靠 CSS 无法对内部结构进行样式设计</h4>\n<ul>\n<li><a href=\"/zh-CN/docs/Web/HTML/Element/input/color\"><code><input type=\"color\"></code></a></li>\n<li>与日期相关的控件，如 <a href=\"/zh-CN/docs/Web/HTML/Element/input/datetime-local\"><code><input type=\"datetime-local\"></code></a></li>\n<li><a href=\"/zh-CN/docs/Web/HTML/Element/input/range\"><code><input type=\"range\"></code></a></li>\n<li><a href=\"/zh-CN/docs/Web/HTML/Element/input/file\"><code><input type=\"file\"></code></a></li>\n<li>涉及到创建下拉部件的元素，包括 <a href=\"/zh-CN/docs/Web/HTML/Element/select\"><code><select></code></a>、<a href=\"/zh-CN/docs/Web/HTML/Element/option\"><code><option></code></a>、<a href=\"/zh-CN/docs/Web/HTML/Element/optgroup\"><code><optgroup></code></a> 和 <a href=\"/zh-CN/docs/Web/HTML/Element/datalist\"><code><datalist></code></a>。</li>\n<li><a href=\"/zh-CN/docs/Web/HTML/Element/progress\"><code><progress></code></a> 和 <a href=\"/zh-CN/docs/Web/HTML/Element/meter\"><code><meter></code></a></li>\n</ul>\n<p>例如，日期选择器的日历和点击时会显示选项列表的 <select> 按钮不能仅使用 CSS 进行样式设计。</p>\n<p><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">表单样式化进阶</a>和<a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls\">如何构建自定义表单控件</a>两篇文章介绍了如何设置这些样式。</p>\n<div class=\"notecard note\">\n<p><strong>备注：</strong>\n一些专有的 CSS 伪元素（如 <a href=\"/en-US/docs/Web/CSS/::-moz-range-track\" class=\"only-in-en-us\"><code>::-moz-range-track</code></a>）可以为此类内部组件设计样式，但它们在不同浏览器之间并不一致，因此并不十分可靠。我们稍后会提到。</p>\n</div>"}},{"type":"prose","value":{"id":"对简单的表单微件进行样式设计","title":"对简单的表单微件进行样式设计","isH3":false,"content":"<p>可以使用<a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Your_first_form\">你的首个表单</a>和 <a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics\">CSS 构建</a>文章中的技术对上一节中“易于样式化”的微件进行样式设计。还有一些特殊的选择器——<a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI 伪类</a>——可以根据用户界面的当前状态来设计样式。</p>\n<p>我们将在本文结尾举例说明，但首先，这里有一些值得了解的表单样式的特殊方面。</p>"}},{"type":"prose","value":{"id":"字体和文本","title":"字体和文本","isH3":true,"content":"<p>CSS 字体和文本功能可轻松用于任何微件（是的，可以将 <a href=\"/zh-CN/docs/Web/CSS/@font-face\"><code>@font-face</code></a> 用于表单微件）。不过，浏览器的行为往往不一致。默认情况下，某些微件不会从其父代继承 <a href=\"/zh-CN/docs/Web/CSS/font-family\"><code>font-family</code></a> 和 <a href=\"/zh-CN/docs/Web/CSS/font-size\"><code>font-size</code></a>。许多浏览器会使用系统默认的外观。为了使表单的外观与其他内容保持一致，可以在样式表中添加以下规则：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>button,\ninput,\nselect,\ntextarea {\n font-family: inherit;\n font-size: 100%;\n}\n</code></pre></div>\n<p><a href=\"/zh-CN/docs/Web/CSS/inherit\"><code>inherit</code></a> 属性值会使属性值与其父元素属性的计算值相匹配；继承父元素的值。</p>\n<p>下面的截图显示了两者的区别。左边是 MacOS 上 Chrome 浏览器中 <code><input type=\"text\"></code>、<code><input type=\"date\"></code>、<a href=\"/zh-CN/docs/Web/HTML/Element/select\"><code><select></code></a>、<a href=\"/zh-CN/docs/Web/HTML/Element/textarea\"><code><textarea></code></a>、<code><input type=\"submit\"></code> 和 <code><button></code> 的默认渲染结果，使用的是该平台的默认字体样式。右边是应用了上述样式规则的相同元素。</p>\n<p><img src=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms/forms_fontfamily.png\" alt=\"具有默认和继承字体系列的表单控件。默认情况下，有些类型是有衬线字体，有些是无衬线字体。继承应将所有类型的字体更改为父类的字体族，在本例中就是段落。奇怪的是，提交类型的输入并不继承父级段落。\" width=\"483\" height=\"260\" loading=\"lazy\"></p>\n<p>默认设置在许多方面存在差异。继承者应将其字体更改为父代的字体家族——在本例中，即父代容器的默认衬线字体。它们都能做到，但有一个奇怪的例外——在 Chrome 浏览器中，<code><input type=\"submit\"></code> 不能从父段落继承。相反，它使用 <a href=\"/zh-CN/docs/Web/CSS/font-family#values\"><code>font-family: system-ui</code></a>。这也是使用 <code><button></code> 元素而非等价 input 类型的另一个原因！</p>\n<p>关于使用系统默认样式的表单更好看，还是使用为匹配的内容而设计的自定义样式的表单更好看，有很多争论。作为网站或 Web 应用程序的设计者，你可以自行决定。</p>"}},{"type":"prose","value":{"id":"盒子尺寸","title":"盒子尺寸","isH3":true,"content":"<p>所有文本字段都完全支持 CSS 盒模型的所有相关属性，例如 <a href=\"/zh-CN/docs/Web/CSS/width\"><code>width</code></a>、<a href=\"/zh-CN/docs/Web/CSS/height\"><code>height</code></a>、<a href=\"/zh-CN/docs/Web/CSS/padding\"><code>padding</code></a>、<a href=\"/zh-CN/docs/Web/CSS/margin\"><code>margin</code></a> 以及 <a href=\"/zh-CN/docs/Web/CSS/border\"><code>border</code></a>。不过，和以前一样，浏览器在显示这些微件时会依赖系统默认样式。你可以自行定义如何将它们融入内容。如果你想保持这些部件的原生观感，那么如果你想给它们一个一致的大小，就会遇到一点困难。</p>\n<p><strong>这是因为每个微件都有自己的边框、外边距和内边距规则</strong>。要为多个不同的微件提供相同的尺寸，可以使用 <a href=\"/zh-CN/docs/Web/CSS/box-sizing\"><code>box-sizing</code></a> 属性以及其他属性的一些一致值：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>input,\ntextarea,\nselect,\nbutton {\n width: 150px;\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n}\n</code></pre></div>\n<p>在下面的截图中，左栏显示了 <code><input type=\"radio\"></code>、<code><input type=\"checkbox\"></code>、<code><input type=\"range\"></code>、<code><input type=\"text\"></code>、<code><input type=\"date\"></code>、<a href=\"/zh-CN/docs/Web/HTML/Element/select\"><code><select></code></a>、<a href=\"/zh-CN/docs/Web/HTML/Element/textarea\"><code><textarea></code></a>、<code><input type=\"submit\"></code>和 <a href=\"/zh-CN/docs/Web/HTML/Element/button\"><code><button></code></a> 的默认渲染结果。右栏则显示了应用了上述规则的相同元素。请注意，尽管平台对每种微件都有默认规则，但我们仍能确保所有元素占用相同的空间。</p>\n<p><img src=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms/boxmodel_formcontrols1.png\" alt=\"盒模型对大多数 input 类型有效。\" width=\"359\" height=\"365\" loading=\"lazy\"></p>\n<p>从截图中可能看不出的是，单选框和复选框控件看起来还是一样的，但它们的居中位置是 <a href=\"/zh-CN/docs/Web/CSS/width\"><code>width</code></a> 属性提供的 150px 水平空间。其他浏览器可能不会将控件居中，但它们会遵守分配的空间。</p>"}},{"type":"prose","value":{"id":"图例摆放","title":"图例摆放","isH3":true,"content":"<p><a href=\"/zh-CN/docs/Web/HTML/Element/legend\"><code><legend></code></a> 元素的样式设计没问题，但要控制它的位置就有点麻烦了。默认情况下，它总是位于 <a href=\"/zh-CN/docs/Web/HTML/Element/fieldset\"><code><fieldset></code></a> 父元素的顶部边框上方，靠近左上角。如果要将其置于其他位置，例如 fieldset 内部或左下角附近，则需要依靠定位。</p>\n<p>看看下面这个示例：</p>\n<iframe width=\"100%\" height=\"400\" src=\"https://mdn.github.io/learning-area/html/forms/native-form-widgets/positioned-legend.html\" loading=\"lazy\"></iframe>\n<p>为了以这种方式定位图例，我们使用了以下 CSS（为简洁起见，删除了其他声明）：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>fieldset {\n position: relative;\n}\n\nlegend {\n position: absolute;\n bottom: 0;\n right: 0;\n}\n</code></pre></div>\n<p><code><fieldset></code> 也需要定位，以便使 <code><legend></code> 相对于它定位（否则 <code><legend></code> 将相对于 <code><body></code> 定位）。</p>\n<p><a href=\"/zh-CN/docs/Web/HTML/Element/legend\"><code><legend></code></a> 元素对于无障碍辅助功能非常重要，它将作为字段集内每个表单元素标签的一部分被辅助技术识别，但使用类似上述的技术也没有问题。图例内容仍将以相同的方式显示，只是视觉位置发生了变化。</p>\n<div class=\"notecard note\">\n<p><strong>备注：</strong>\n也可以使用 <a href=\"/zh-CN/docs/Web/CSS/transform\"><code>transform</code></a> 属性来辅助定位 <code><legend></code>。但是，当使用 <code>transform: translateY();</code> 等属性定位时，它虽然移动了，但却在 <code><fieldset></code> 边框中留下了一个难看的缺口，而且很难消除。</p>\n</div>"}},{"type":"prose","value":{"id":"一个具体的样式设计示例","title":"一个具体的样式设计示例","isH3":false,"content":"<p>让我们来看一个如何为 HTML 表单设计样式的具体示例。我们将制作一个外观精美的“明信片”联系表单；<a href=\"https://mdn.github.io/learning-area/html/forms/postcard-example/\" class=\"external\" target=\"_blank\">请参见此处的完成版</a>。</p>\n<p>如果你想学习这个示例，请将我们的 <a href=\"https://github.com/mdn/learning-area/blob/main/html/forms/postcard-example/postcard-start.html\" class=\"external\" target=\"_blank\">postcard-start.html 文件</a>拷贝到本地，然后按照下面的说明操作。</p>"}},{"type":"prose","value":{"id":"html","title":"HTML","isH3":true,"content":"<p>与我们在<a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Your_first_form\">本指南第一篇文章</a>中使用的示例相比，HTML 只是稍微复杂一些；它只是多了几个 ID 和一个标题。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><form>\n <h1>to: Mozilla</h1>\n\n <div id=\"from\">\n <label for=\"name\">from:</label>\n <input type=\"text\" id=\"name\" name=\"user_name\" />\n </div>\n\n <div id=\"reply\">\n <label for=\"mail\">reply:</label>\n <input type=\"email\" id=\"mail\" name=\"user_email\" />\n </div>\n\n <div id=\"message\">\n <label for=\"msg\">Your message:</label>\n <textarea id=\"msg\" name=\"user_message\"></textarea>\n </div>\n\n <div class=\"button\">\n <button type=\"submit\">Send your message</button>\n </div>\n</form>\n</code></pre></div>\n<p>将以上代码添加到 HTML 的 body 部分。</p>"}},{"type":"prose","value":{"id":"整理资源文件","title":"整理资源文件","isH3":true,"content":"<p>这就是有趣的开始！在开始编码之前，我们还需要三种额外的资源：</p>\n<ol>\n<li><a href=\"background.jpg\">明信片背景</a>——下载该图片，并将其保存在与需要处理的 HTML 文件相同的目录下。</li>\n<li>打字机字体：<a href=\"https://www.dafont.com/moms-typewriter.font?back=theme\" class=\"external\" target=\"_blank\">来自 dafont.com 的“Mom's Typewriter”字体</a>——将 TTF 文件下载到与上述相同的目录中。</li>\n<li>手绘字体：<a href=\"https://www.dafont.com/journal.font\" class=\"external\" target=\"_blank\">来自 dafont.com 的“Journal”字体</a>——将 TTF 文件下载到与上述相同的目录中。</li>\n</ol>\n<p>在开始使用之前，你的字体还需要进一步处理：</p>\n<ol>\n<li>访问 fontsquirrel.com 的 <a href=\"https://www.fontsquirrel.com/tools/webfont-generator\" class=\"external\" target=\"_blank\">Web 字体生成器</a>工具。</li>\n<li>使用表单上传字体文件，生成 Web 字体工具包。将该工具包下载到你的电脑上。</li>\n<li>解压缩提供的压缩文件。</li>\n<li>在解压后的内容中，你会发现一些字体文件（在撰写本文时，有两个 <code>.woff</code> 文件和两个 <code>.woff2</code> 文件；将来可能会有变化）。将这些文件复制到一个名为 fonts 的目录中，该目录与之前的目录相同。我们为每种字体使用了两个不同的文件，以最大限度地提高浏览器兼容性；请参阅我们的 <a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Web 字体</a>文章，了解更多信息。</li>\n</ol>"}},{"type":"prose","value":{"id":"css","title":"CSS","isH3":true,"content":"<p>现在，我们可以为示例编写 CSS。在 <a href=\"/zh-CN/docs/Web/HTML/Element/style\"><code><style></code></a> 元素内逐一添加下图所示的所有代码块。</p>\n<h4 id=\"总体布局\">总体布局</h4>\n<p>首先，我们要定义 <a href=\"/zh-CN/docs/Web/CSS/@font-face\"><code>@font-face</code></a> 规则，并在 <a href=\"/zh-CN/docs/Web/HTML/Element/body\"><code><body></code></a> 和 <a href=\"/zh-CN/docs/Web/HTML/Element/form\"><code><form></code></a> 元素上设置所有基本样式。如果 fontsquirrel 的输出与我们上面描述的不同，可以在下载的 Web 字体工具包的 <code>stylesheet.css</code> 文件中找到正确的 <code>@font-face</code> 块（需要用它们替换下面的 <code>@font-face</code> 块，并更新字体文件的路径）：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>@font-face {\n font-family: \"handwriting\";\n src:\n url(\"fonts/journal-webfont.woff2\") format(\"woff2\"),\n url(\"fonts/journal-webfont.woff\") format(\"woff\");\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"typewriter\";\n src:\n url(\"fonts/momot___-webfont.woff2\") format(\"woff2\"),\n url(\"fonts/momot___-webfont.woff\") format(\"woff\");\n font-weight: normal;\n font-style: normal;\n}\n\nbody {\n font: 1.3rem sans-serif;\n padding: 0.5em;\n margin: 0;\n background: #222;\n}\n\nform {\n position: relative;\n width: 740px;\n height: 498px;\n margin: 0 auto;\n padding: 1em;\n box-sizing: border-box;\n background: #fff url(background.jpg);\n\n /* we create our grid */\n display: grid;\n grid-gap: 20px;\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: 10em 1em 1em 1em;\n}\n</code></pre></div>\n<p>请注意，我们使用了 <a href=\"/zh-CN/docs/Web/CSS/CSS_grid_layout\">CSS 网格</a>和<a href=\"/zh-CN/docs/Web/CSS/CSS_flexible_box_layout\">弹性盒</a>来布局表单。这样，我们就可以轻松定位元素，包括标题和所有表单元素：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>h1 {\n font:\n 1em \"typewriter\",\n monospace;\n align-self: end;\n}\n\n#message {\n grid-row: 1 / 5;\n}\n\n#from,\n#reply {\n display: flex;\n}\n</code></pre></div>\n<h4 id=\"标签与控件\">标签与控件</h4>\n<p>现在，我们可以开始处理表单元素本身了。首先，确保 <a href=\"/zh-CN/docs/Web/HTML/Element/label\"><code><label></code></a> 的字体正确：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>label {\n font:\n 0.8em \"typewriter\",\n sans-serif;\n}\n</code></pre></div>\n<p>文本字段需要一些通用规则。换句话说，我们删除了它们的 <a href=\"/zh-CN/docs/Web/CSS/border\"><code>border</code></a> 和 <a href=\"/zh-CN/docs/Web/CSS/background\"><code>background</code></a>，并重新定义了它们的 <a href=\"/zh-CN/docs/Web/CSS/padding\"><code>padding</code></a> 和 <a href=\"/zh-CN/docs/Web/CSS/margin\"><code>margin</code></a>：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>input,\ntextarea {\n font:\n 1.4em/1.5em \"handwriting\",\n cursive,\n sans-serif;\n border: none;\n padding: 0 10px;\n margin: 0;\n width: 80%;\n background: none;\n}\n</code></pre></div>\n<p>当其中一个字段获得焦点时，我们会用浅灰色透明背景来突出显示它们（为了便于使用和键盘无障碍，焦点样式总是很重要的）：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>input:focus,\ntextarea:focus {\n background: rgb(0 0 0 / 10%);\n border-radius: 5px;\n}\n</code></pre></div>\n<p>现在我们的文本字段已经完成，我们需要调整单行和多行文本字段的显示方式，使其匹配，因为使用默认设置时，它们的显示方式通常不会相同。</p>\n<h4 id=\"调整_textarea\">调整 textarea</h4>\n<p><a href=\"/zh-CN/docs/Web/HTML/Element/textarea\"><code><textarea></code></a> 元素默认渲染为 inline-block 元素。这里最重要的是 <a href=\"/zh-CN/docs/Web/CSS/resize\"><code>resize</code></a> 和 <a href=\"/zh-CN/docs/Web/CSS/overflow\"><code>overflow</code></a> 属性。虽然我们的设计为固定尺寸，我们可以使用 <code>resize</code> 属性来阻止用户调整多行文本字段的大小，但最好不要阻止用户调整文本区域的大小（如果他们愿意的话）。<a href=\"/zh-CN/docs/Web/CSS/overflow\"><code>overflow</code></a> 属性用于使字段在不同浏览器中的呈现更加一致。有些浏览器默认值为 <code>auto</code>，而有些浏览器默认值为 <code>scroll</code>。在我们的示例中，最好确保每个人都使用 <code>auto</code>：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>textarea {\n display: block;\n\n padding: 10px;\n margin: 10px 0 0 -10px;\n width: 100%;\n height: 90%;\n\n border-right: 1px solid;\n\n /* resize : none; */\n overflow: auto;\n}\n</code></pre></div>\n<h4 id=\"对提交按钮进行样式设计\">对提交按钮进行样式设计</h4>\n<p><a href=\"/zh-CN/docs/Web/HTML/Element/button\"><code><button></code></a> 元素非常便于使用 CSS 进行样式设计；你可以随心所欲，甚至可以使用<a href=\"/zh-CN/docs/Web/CSS/Pseudo-elements\">伪元素</a>进行设置：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>button {\n padding: 5px;\n font: bold 0.6em sans-serif;\n border: 2px solid #333;\n border-radius: 5px;\n background: none;\n cursor: pointer;\n transform: rotate(-1.5deg);\n}\n\nbutton:after {\n content: \" >>>\";\n}\n\nbutton:hover,\nbutton:focus {\n background: #000;\n color: #fff;\n}\n</code></pre></div>"}},{"type":"prose","value":{"id":"最终结果","title":"最终结果","isH3":true,"content":"<p>瞧！你的表单现在应该是这样的：</p>\n<p><img src=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms/updated-form-screenshot.jpg\" alt=\"如上所述应用所有样式和调整后表单的最终外观和布局\" width=\"740\" height=\"497\" loading=\"lazy\"></p>\n<div class=\"notecard note\">\n<p><strong>备注：</strong>\n如果你的示例没有像你预期的那样工作，你想将它同我们的版本检查对比，你可以在 Github 上找到它——查看<a href=\"https://mdn.github.io/learning-area/html/forms/postcard-example/\" class=\"external\" target=\"_blank\">在线演示</a>（也可以查看<a href=\"https://github.com/mdn/learning-area/tree/main/html/forms/postcard-example\" class=\"external\" target=\"_blank\">源代码</a>）。</p>\n</div>"}},{"type":"prose","value":{"id":"技能测试","title":"技能测试","isH3":false,"content":"<p>本文已经结束，但你还记得最重要的信息吗？在继续学习之前，还可以通过一些测试来验证自己是否记住了这些信息——请参阅<a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Test_your_skills:_Styling_basics\" class=\"only-in-en-us\">技能测试：样式化基础</a>。</p>"}},{"type":"prose","value":{"id":"总结","title":"总结","isH3":false,"content":"<p>正如你所看到的，只要我们想创建只有文本字段和按钮的表单，就很容易使用 CSS 对其进行样式设置。<a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">下一篇文章中</a>，我们将会看到如何处理落入“不好的”和“丑陋的”分类的表单微件。</p>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Other_form_controls\"><span class=\"button-wrap\"> 上一页 </span></a></li><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms\"><span class=\"button-wrap\"> 概述：Web 表单构建块</span></a></li><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\"><span class=\"button-wrap\"> 下一页 </span></a></li></ul>"}},{"type":"prose","value":{"id":"进阶内容","title":"进阶内容","isH3":true,"content":"<ul>\n<li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls\">如何构建自定义表单控件</a></li>\n<li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Sending_forms_through_JavaScript\">通过 JavaScript 发送表单</a></li>\n<li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms\">表单控件的属性兼容性列表</a></li>\n</ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"zh-CN","mdn_url":"/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms","modified":"2024-12-21T09:57:08.000Z","native":"中文 (简体)","noIndexing":false,"other_translations":[{"locale":"en-US","title":"Styling web forms","native":"English (US)"},{"locale":"de","title":"Styling von Webformularen","native":"Deutsch"},{"locale":"es","title":"Estilizando formularios HTML","native":"Español"},{"locale":"fr","title":"Mise en forme des formulaires HTML","native":"Français"},{"locale":"ja","title":"ウェブフォームへのスタイル設定","native":"日本語"},{"locale":"ru","title":"Стили HTML форм","native":"Русский"}],"pageTitle":"样式化 Web 表单 - 学习 Web 开发 | MDN","parents":[{"uri":"/zh-CN/docs/Learn_web_development","title":"学习 Web 开发"},{"uri":"/en-US/docs/Learn_web_development/Extensions","title":"Extension modules"},{"uri":"/zh-CN/docs/Learn_web_development/Extensions/Forms","title":"Web 表单构建块"},{"uri":"/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms","title":"样式化 Web 表单"}],"popularity":null,"short_title":"样式化 Web 表单","sidebarHTML":"<ol><li class=\"section\"><a href=\"/zh-CN/docs/Learn_web_development/Getting_started\">入门模块</a></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup\">配置环境</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">安装基础软件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">浏览互联网</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\" class=\"only-in-en-us\">Code editors</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">处理文件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">命令行速成课</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website\">你的第一个网站</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">你的网站会是什么样子？</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML 基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS 基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript 基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">发布你的网站</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards\" class=\"only-in-en-us\">Web 标准</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">万维网是如何工作的</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">Web 和 Web 标准</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\" class=\"only-in-en-us\">How browsers load websites</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills\" class=\"only-in-en-us\">软性技能</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\" class=\"only-in-en-us\">Research and learning</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\" class=\"only-in-en-us\">Collaboration and teamwork</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\" class=\"only-in-en-us\">Workflows and processes</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\" class=\"only-in-en-us\">Succeeding in job interviews</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Core\" class=\"only-in-en-us\">核心模块</a></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content\">使用 HTML 构建内容</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">开始学习 HTML</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">“头”里有什么——HTML 元信息</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">HTML 文本处理基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">强调与重要性</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Lists\" class=\"only-in-en-us\">Lists</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">文档与网站架构</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">文本格式进阶</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links\">创建超链接</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">标记信件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">构建网页内容</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML 中的图片</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">视频和音频内容</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Mozilla 欢迎页面</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">HTML 表格基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">HTML 表格进阶特性和无障碍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">作业：构建行星数据</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms\" class=\"only-in-en-us\">Forms and buttons in HTML</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">HTML 调试</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics\">CSS 样式基础</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">CSS 如何运行</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Getting_started\">让我们开始 CSS 的学习之旅</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">运用你的新知识</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">CSS 选择器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">属性选择器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">伪类和伪元素</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Combinators\">关系选择器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model\">盒模型</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">层叠、优先级与继承</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS 值和单位</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Sizing\">在 CSS 中调整大小</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">背景与边框</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Overflow\">溢出的内容</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">图像、媒体和表单元素</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Tables\">样式化表格</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">调试 CSS</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">基本的 CSS 理解</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">创建精美的信纸</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">一个漂亮的盒子</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling\">CSS 文本样式</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Fundamentals\">基本文本和字体样式</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_lists\">为列表添加样式</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_links\">样式化链接</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Web 字体</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">作业：排版社区大学首页</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout\">CSS 排版</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Introduction\">介绍 CSS 布局</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Floats\">浮动</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Positioning\">定位</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Flexbox\">弹性盒子</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Grids\">网格</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">响应式设计</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Media_queries\">媒体查询入门指南</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">作业：基本布局理解</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting\">使用 JavaScript 动态编码</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">什么是 JavaScript？</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/A_first_splash\">JavaScript 初体验</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/What_went_wrong\">查找并解决 JavaScript 代码的错误</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Variables\">如何存储你需要的信息——变量</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Math\">JavaScript 中的基础数学 — 数字和操作符</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Strings\">文本处理——JavaScript 中的字符串</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">有用的字符串方法</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays\">数组</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">笑话生成器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals\">在代码中做决定——条件语句</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Loops\">循环吧，代码</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Functions\">函数——可复用的代码块</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">创建你自己的函数</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Return_values\">函数返回值</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Events\">事件介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Event_bubbling\">事件冒泡</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Image_gallery\">图片库</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript 对象基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/DOM_scripting\">DOM 脚本简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Network_requests\">从服务器获取数据</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/JSON\">使用 JSON</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">处理常见的 JavaScript 问题</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript 架构和库</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">客户端框架介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">框架的主要特性</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">React 入门</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">开始我们的 React 待办清单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">组件化我们的 React App</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\" class=\"only-in-en-us\">React interactivity: Events and state</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\" class=\"only-in-en-us\">React interactivity: Editing, filtering, conditional rendering</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\" class=\"only-in-en-us\">Accessibility in React</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\" class=\"only-in-en-us\">React resources</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility\">无障碍</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">什么是无障碍？</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling\">解决常见的无障碍问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML\">HTML：无障碍的良好基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS 和 JavaScript 无障碍最佳实践</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA 基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/Multimedia\">多媒体无障碍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/Mobile\">移动端无障碍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">测验：无障碍疑难解答</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Design_for_developers\" class=\"only-in-en-us\">为开发人员设计</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Version_control\">版本控制</a></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Extensions\" class=\"only-in-en-us\">扩展模块</a></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">对象原型</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">面向对象编程基本概念</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">JavaScript 中的类</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">实践对象构造</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">为“弹球”示例添加新功能</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs\">客户端 Web API</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Web API 简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">视频和音频 API</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">绘图</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">客户端存储</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">第三方 API</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS\">异步 JavaScript</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing\">异步 JavaScript 简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Promises\">如何使用 Promise</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">如何实现基于 Promise 的 API</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">worker 简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">序列动画</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms\">Web 表单</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Your_first_form\">创建我的第一个表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">如何构建 HTML 表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">原生表单部件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">HTML5 的输入（input）类型</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">其他表单控件</a></li><li><em><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\" aria-current=\"page\">样式化 Web 表单</a></em></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">表单样式化进阶</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI 伪类</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Form_validation\">表单数据校验</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">发送表单数据</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools\">理解客户端工具</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">客户端工具概述</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">软件包管理基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">介绍完整的工具链</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">部署我们的应用</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side\">服务端网站</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps\">服务端基础</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">服务端编程介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">客户端服务端交互概述</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">服务端 web 框架</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">站点安全</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django\">Django web 框架（Python）</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Django 介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">设置 Django 开发环境</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: The Local Library website</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django Tutorial Part 2: 创建网站的地基</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Models\">Django Tutorial Part 3: 使用模型</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\">Django Tutorial Part 4: Django 管理员站点</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\">Django 教程 5：主页构建</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\">Django 教程 6: 通用列表和详细信息视图</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\">Django 教程 7: 会话框架</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\">Django 教程 8：用户授权与许可</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Forms\">Django 教程 9: 使用表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Testing\">Django 教程 10: 测试 Django 网页应用</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\">Django 教程 11：部署 Django 到生产环境</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\">Django Web 应用安全</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\">评估：DIY Django 微博客</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express web 框架（Node.js）</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Express/Node 入门</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">设置 Node 开发环境</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express 教程：本地图书馆网站</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express 教程 2：创建站点框架</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express 教程 3：使用数据库 (Mongoose)</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\">Express 教程 4：路由和控制器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express 教程 5: 呈现图书馆数据</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express 教程 6: 使用表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\">Express 教程 7：部署到生产环境</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance\">Web 性能</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/why_web_performance\">Web 性能的重要性</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">什么是 web 性能？</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">感知性能</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">测量性能</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/Multimedia\">多媒体：图片</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/video\">多媒体：视频</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/HTML\">HTML 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/CSS\">CSS 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">web 性能的商业案例</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing\">测试</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Introduction\">跨浏览器测试介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">测试的策略</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">处理常见的 HTML 和 CSS 问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Feature_detection\">实现特性检测</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Automated_testing\">自动化测试简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">搭建自己的自动化测试环境</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Transform_animate\" class=\"only-in-en-us\">CSS 变换与动画化</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Security_privacy\" class=\"only-in-en-us\">安全与隐私</a></li><li class=\"section\">更多资源</li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Howto\">如何解决常见问题</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Solve_HTML_problems\">使用 HTML 解决常见问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Solve_CSS_problems\">解决常见的 CSS 问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">解决 JavaSctript 代码的常见问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Web_mechanics\">Web 机制</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup\">工具和安装</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Design_and_accessibility\">设计与无障碍</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/About\" class=\"only-in-en-us\">关于</a></li><li><a href=\"/en-US/docs/Learn_web_development/Educators\" class=\"only-in-en-us\">面向教育工作者的资源</a></li><li><a href=\"/en-US/docs/Learn_web_development/Changelog\" class=\"only-in-en-us\">更新日志</a></li></ol>","source":{"folder":"zh-cn/learn_web_development/extensions/forms/styling_web_forms","github_url":"https://github.com/mdn/translated-content/blob/main/files/zh-cn/learn_web_development/extensions/forms/styling_web_forms/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/1d06b61e7057d21515fd81694c2280905735a571","filename":"index.md"},"summary":"在前几篇文章中，我们介绍了如何用 HTML 创建网页表单。现在，我们将介绍如何使用 CSS 来设置表单样式。","title":"样式化 Web 表单","toc":[{"text":"表单微件样式设计的挑战","id":"表单微件样式设计的挑战"},{"text":"对简单的表单微件进行样式设计","id":"对简单的表单微件进行样式设计"},{"text":"一个具体的样式设计示例","id":"一个具体的样式设计示例"},{"text":"技能测试","id":"技能测试"},{"text":"总结","id":"总结"}],"pageType":"learn-module-chapter"}}</script></body></html>