html - 使用带有输入文本和提交按钮的 CSS3 和 HTML 的图像效果

Question

我的登录屏幕图像如下所示:

有什么方法可以仅使用 CSS3 和 HTML5 创建相似的图像吗？“用户名:”和“密码:”之后的下划线是无边框的输入类型=“文本”(因此用户可以输入文本)

登录是按钮。所有这些字段都放在 HTML 表单中。

Answer 1

您可以这样设置元素的样式:

#box { /* Container box */
    width:450px;
    padding:50px;
    background:#463; /* set image here */
}
#usr, #pwd { /* input boxes */
    border:none;
    border-bottom:3px solid white;
    background:transparent;
    color:#fff;
    font:bold 24px sans-serif;
}
#box > div { /* container for lines (label + input) */
    margin-bottom:26px;
}
#box > div > label,
#box > button {
    color:#fff;
    font:bold 24px sans-serif;
}
#box > button { /* A simple button */
    background:transparent;
    border:none;
    text-align:center;
    color:#ff0;
    width:100%;
}

一些虚拟的 html:

<div id="box">
    <div>
        <label for="usr">Username:</label>
        <input id="usr">
    </div>
    <div>
        <label for="pwd">Password:</label>
        <input id="pwd" type="password">
    </div>
    <button id="login">Login</button>
</div>

Online demo here

只需将板的背景替换为您正在使用的图像，并使用实际字体即可。