使用CSS3＆amp ;;的图像效果带输入文本和提交按钮的HTML

Question

我登录屏幕图像如下所述：

有没有办法只使用CSS3＆amp;创建相似的图像HTML5？ “用户名：”之后的下划线＆amp; “密码：”是输入类型=“文本”没有边框（因此用户可以键入文本）

登录是按钮。所有这些字段都放在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

只需用您正在使用的图像替换电路板背景，然后使用实际字体。