HTML进阶（4）- 美化表单元素

最新推荐文章于 2024-08-08 12:27:38 发布
最新推荐文章于 2024-08-08 12:27:38 发布
阅读量156 收藏
点赞数
分类专栏： web前端 文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_43416592/article/details/126454559
版权
本文介绍了如何使用CSS重置表单元素样式，如textarea的宽高调整，以及focus和checked伪类的新应用。通过调整textarea的resize属性实现不同调整方式，控制input元素的边距，以及定制单选和多选框的样式。同时，提供了相关课程的参考资料链接。
摘要由CSDN通过智能技术生成

本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录，仅作为个人记录以及阅读使用。

文章目录

美化表单元素

新的伪类

  1. focus

元素聚焦时的样式

  1. checked

单选或多选框被选中时的样式

常见用法

  1. 重置表单元素样式

  2. 设置textarea文本框是否可以调整宽高

css属性resize:

  • both 默认值，两个方向都可以调整尺寸
  • none 不能调整尺寸
  • horizontal 水平方向可以调整尺寸
  • vertical 垂直方向可以调整尺寸

  1. 文本框边缘到内容的距离

  2. 控制单选和多选的样式

参考资料

  1. 【渡一教育】袁进老师的html+css基础课程
  2. 【渡一教育】袁进老师相关课程源代码
Brisa56
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML表单美化
web前端开发教程htmlcssjs
01-16 1860
由于一些系统原生的表单控件在各个浏览器中显示效果不一致，且无法设置某些关键CSS样式，为了保证表单在各浏览器中的兼容性，表单美化就是不得不做的一件事了 单选按钮 【实现效果】 【实现过程】 body{ margin: 0; font: 16px/20px "宋体"; } .box{ width: 500px; height: 100px; line-hei...
HTML-CSS-项目
02-13
在"HTML-CSS-projects-master"这个文件夹中，我们可以期待找到一些实际的项目示例，这些示例可能涵盖基础布局、响应式设计、导航栏、下拉菜单、轮播图、卡片式布局、表单设计等常见网页元素和效果。通过学习和实践...
【前端基础】9.html5表单验证美化
menghen113的博客
08-04 632
html5表单验证。
【前端学习之HTML&CSS进阶篇】-- HTML第四篇 -- 美化表单
lc1852109的博客
03-27 2303
本篇博客是对于表单元素的一些补充，主要针对于如何美化表单的样式，学习了两种新的伪类选择器，扩张了重置样式表，并且给出了一种可以生成自己想要样式选择框的方法。
HTML进阶-4.3美化表单元素
莫听穿林打叶声，何妨吟啸且徐行。
02-15 166
文章目录美化表单元素新的伪类常见用法 美化表单元素 新的伪类 focus：元素聚焦时的样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compa
HTML进阶之美化表单元素
yihen0214的博客
09-01 254
美化表单元素 文章目录美化表单元素新的伪类常见用法 新的伪类 focus 表示元素聚焦时的样式 input:focus{ outline: 1px #008c8c solid; outline-offset: 0px; color: aquamarine; } tabindex属性可以设置聚焦顺序(即按下tab键时, 聚焦的顺序) checked 单选或多选框被选中时的样式 单选框和单选框可以改变的样式极少, 一般用于改变子元素的样式
29、CSS进阶——美化表单元素
lvh98的博客
08-04 1178
接着上一节表单元素，这一节介绍了美化表单元素的一些场景和方法，介绍了表单元素相关的两个常用的伪类选择器focus和checked。
HTML进阶（二）表单元素及其美化
COOL66BOY的博客
03-08 420
文章目录表单元素input元素select元素textarea元素按钮元素表单状态配合表单元素的其他元素labeldatalistform元素fieldset元素美化表单元素新的伪类常见用法 表单元素 一系列元素，主要用于收集用户数据 input元素 输入框 type属性：输入框类型 type: text， 普通文本输入框 type：password，密码框（输入时不显示密码） type: date, 日期选择框，兼容性问题 type: search, 搜索框，兼容性问题 type: number，数字
【前端学习之HTML&CSS进阶篇】-- HTML第三篇 -- 表单元素
lc1852109的博客
03-26 480
关于HTML的进阶部分，这里将会是最后一部分内容，表单元素，就是以一系列用于收集用户数据的元素。我们主要对input元素、select元素、textarea元素、按钮元素等表单进行介绍，再加上一些表单的状态以及配合元素的讲解。
HTML-离线中文手册
07-03
在W3CSchool的HTML部分，你可以找到从基础到进阶的全面教程，涵盖了HTML标签、属性、表格、表单、图像、链接等内容。对于初学者来说，这是一个非常实用的学习资源，能帮助快速掌握HTML的基本语法和用法。 其次，CSS...
html-css-12bool
03-13
除此之外，HTML还支持表格、表单、框架等多种复杂布局元素。 CSS则是用于美化HTML元素的样式规则，它可以控制字体、颜色、布局、动画等各种视觉效果。CSS通过选择器来匹配HTML元素，并应用相应的样式。例如，`color...
html-css-bootstrap-freelancer
05-11
一、HTML：基础与进阶 HTML（HyperText Markup Language）是网页内容的基础结构语言，它定义了网页的各个部分，如标题、段落、图像等。了解HTML的基本语法，包括标签、属性和元素嵌套，是每个网页开发者必须掌握的...
html-test.site
04-27
标题“html-test.site”暗示了这是一个与HTML相关的测试站点，可能是用于学习、演示或验证HTML...通过探索这个压缩包，你可以深入了解HTML元素的使用，学习如何组织和美化网页，以及如何利用JavaScript实现动态效果。
html--前端
m0_60274660的博客
08-07 323
只有body中的标签的内容才会输出到中断；如果要看script标签中的javascript代码的输出，需要按F12,点击Console查看。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1407
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
JavaWeb-01(Java进阶内容详解，Html、CSS、JS)
最新发布
泰勒今天想展开的博客
08-08 905
Chinese (Simplified) (简体中文) Language Pack for Visual Studio CodeCode Spell Checker检查单词错误VueHelperBeautifyVetur。
FastAdmin默认表单中显示列表
qq_40088333的博客
08-08 196
FastAdmin默认表单中显示列表
Html详解——Vue基础
敲厉害的燕宝的博客
08-07 1052
是一种用来。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
HTML+CSS基础教程：标记、美化与表单元素详解
- 表单元素需配合`<form action="">`使用才能进行页面跳转。`<input type="reset">`用于重置表单数据。 通过这份笔记，学习者可以系统地理解HTML和CSS在网页开发中的基本应用，包括元素的分类、表单组件的使用以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值