要给HTML表单换颜色,可以使用CSS样式,以下是详细步骤:
(图片来源网络,侵删)1、在HTML文件中创建一个表单。
<!DOCTYPE html> <html> <head> <title>表单换色</title> </head> <body> <form> <label for="username">用户名:</label> <input type="text" id="username" name="username"> <br> <label for="password">密码:</label> <input type="password" id="password" name="password"> <br> <input type="submit" value="提交"> </form> </body> </html>
2、接下来,为表单添加CSS样式,可以在<head>
标签内添加<style>
标签,或者将CSS代码放在一个单独的文件中,然后在HTML文件中引用该文件,这里我们直接在HTML文件中添加CSS代码:
<!DOCTYPE html> <html> <head> <title>表单换色</title> <style> form { backgroundcolor: lightblue; /* 设置表单背景颜色 */ padding: 20px; /* 设置表单内边距 */ borderradius: 5px; /* 设置表单圆角 */ } label, input { display: block; /* 将标签和输入框设置为块级元素 */ marginbottom: 10px; /* 设置标签和输入框之间的间距 */ } input[type="submit"] { backgroundcolor: blue; /* 设置提交按钮的背景颜色 */ color: white; /* 设置提交按钮的文字颜色 */ border: none; /* 移除提交按钮的边框 */ padding: 5px 10px; /* 设置提交按钮的内边距 */ cursor: pointer; /* 设置鼠标悬停时的指针样式 */ } input[type="submit"]:hover { backgroundcolor: darkblue; /* 设置鼠标悬停时提交按钮的背景颜色 */ } </style> </head> <body> <form> <label for="username">用户名:</label> <input type="text" id="username" name="username"> <br> <label for="password">密码:</label> <input type="password" id="password" name="password"> <br> <input type="submit" value="提交"> </form> </body> </html>
现在,表单的背景颜色、内边距、圆角等已经改变,标签和输入框之间的间距也有所调整,提交按钮的背景颜色、文字颜色、边框等也进行了自定义。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。