云主机测评网云主机测评网云主机测评网

云主机测评网
www.yunzhuji.net

html如何给表单换颜色

要给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>

现在,表单的背景颜色、内边距、圆角等已经改变,标签和输入框之间的间距也有所调整,提交按钮的背景颜色、文字颜色、边框等也进行了自定义。

打赏
版权声明:主机测评不销售、不代购、不提供任何支持,仅分享信息/测评(有时效性),自行辨别,请遵纪守法文明上网。
文章名称:《html如何给表单换颜色》
文章链接:https://www.yunzhuji.net/jishujiaocheng/146519.html

评论

  • 验证码