设置表单样式
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
为确保您的表单可供尽可能多的人访问,请使用
作业:<input>
、<textarea>
、<select>
和<button>
。这是可用表单的基线。
默认浏览器样式看起来并不理想!我们来修改一下。
大多数浏览器中表单控件的默认字体大小太小。
为确保表单控件可读,请使用 CSS 更改字体大小:
增加了 font-size
和 line-height
,以提高可读性。
.form-element {
font-size: 1.3rem;
line-height: 1.2;
}
接下来,更改表单的布局,增加表单元素的间距,
以帮助用户了解哪些元素属于同一类。
margin
CSS 属性可增加元素之间的间距,
padding
属性可增加元素内容周围的空间。
对于常规布局,请使用 Flexbox 或网格。
详细了解 CSS 布局方法。
为您的表单控件使用易于理解的样式,方便用户填写表单。
例如,为 <input>
元素设置实线边框的样式。
input,
textarea {
border: 1px solid;
}
不妨考虑为您的 <button>
使用 background
,使其与您的网站样式保持一致。
以及替换或移除默认的border
样式。
帮助用户了解当前状态
浏览器会为 :focus
应用默认样式。
您可以替换 :focus
的样式,使颜色与您的品牌相匹配。
button:focus {
outline: 4px solid green;
}
检查您的理解情况
测试您对表单样式设置知识的掌握情况
使用 boundary
CSS 属性。
再试一次!
资源
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2021-11-03。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2021-11-03\u3002"}
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2021-11-03。"],[],[]]