样式表输入登录

Question

我想编写CSS和HTML来从psd文件创建这个输入论坛

我有几个问题要问:

首先,我剪切了背景(没有其他图形元素).标题很简单.使用输入文本我发现很难:当用户点击矩形时,文本和图标会消失.

这是我的css代码:

input{
    background: url('input-bg.png') no-repeat;
    border: none;
    width: 303px;
    height: 36px;
}
#username{
    background: url('user-icon.png') no-repeat left;
}
#password{
    background: url('password-icon.png') no-repeat left;
}

其中input-bg.png是以下图片:

<div id="form-login"><img id="member-icon" src="member-icon.png" />
    <h2>Member login</h2>
    <ul>
        <li><input type="text" id="username" placeholder="User Name"/></li>
        <li><input type="password" id="password" placeholder="Password" /></li>
    </ul>
</div> 

问题是没有显示小图标,因为输入文本的背景定义覆盖了它们.有一个简单的方法可以解决这个问题吗？

还有一种简单的方法可以重现右边的发光效果吗？我想用z-index的值比其他元素更高的效果,但是如果你点击窗体右边的按钮或输入文本,显然会出现问题.有什么建议吗？

Answer 1

我在想它是否真的可以在CSS宽度中制作这个形式gradient,所以我试了一下.

这是结果:演示

它不完全像图片中的形式,嘿!我不是网页设计师.通过一些CSS天才的一些改进,你可以使它看起来像图片中的那个.

将?图标替换为您想要的图标.

HTML

<div class="container"> <!-- Unnecessary tag -->
    <div class="form">
        <div class="header">
            Member Login
        </div>
        <div class="body">
            <form>
                <input type="text" placeholder="Username">
                <input type="password" placeholder="Password">
                <input id="rememberme" type="checkbox">
                <label for="rememberme">Remember</label>
                <input type="submit" value="Login Now">
            </form>
        </div>
    </div>
</div>

CSS

body {
    font-family: helvetica, sans-serif;
}

@font-face {
    font-family: 'icons';
    src: url('icons.ttf')  format('truetype');
}

div, input {
    box-sizing: border-box;
}

.container {
    width: 500px;
    height: 350px;
    padding: 35px 0;
    background: -webkit-linear-gradient(left, #C2DD9A, #F5FBF0 50%, #C2DD9A); 
}

.form {
    width: 365px; height: 274px;
    margin: auto;
    background: rgba(0,0,0,.23);
    padding: 2px;
}

.header {
    height: 44px;
    line-height: 44px;
    padding-left: 30px;
    font-size: 20px;
    background: url('http://i.imgur.com/s0O9hy0.png') 325px center no-repeat, -webkit-linear-gradient(top, rgb(253,253,253), rgb(198,203,199));
}

form {
    margin: 0 31px;
}

input[type=text], input[type=password] {
    display: block;
    width: 100%;
    height: 38px;
    padding-left: 38px;
    background: url('http://i.imgur.com/s0O9hy0.png') 10px center no-repeat, -webkit-linear-gradient(45deg, #404040 0%, #404040 60%, #535353 60%, #494949);
    color: #AAA;
    border: 1px solid black;
    transition: box-shadow .3s;
}

input[type=text]:focus, input[type=password]:focus {
    outline: 0;
    box-shadow: inset 0 0 8px rgba(226,239,207,.7);
}

input[type=text] { margin-top: 36px; margin-bottom: 26px; }

input[type=password] { margin-bottom: 36px; margin-top: 26px; }

input[type=checkbox] {
    -webkit-appearance: none;
    width: 11px; height: 11px;
    border-radius: 10px;
    background: rgba(0,0,0,.5);
    margin: 0 5px;
}

input[type=checkbox]:checked {
    background: -webkit-radial-gradient(center center, circle, white 0%, white 30%, rgba(0,0,0,.5) 50%);
}
input[type=checkbox] + label {
    color: white;
    font-size: 15px;
    padding-bottom: 3px;
}

input[type=submit] {
    float: right;
    width: 134px; height: 31px;
    border: 1px solid #B7DA7C;
    background: url('http://i.imgur.com/s0O9hy0.png') 15px center no-repeat, -webkit-linear-gradient(top, #99CC4B, #73A52C);
    font-weight: bold;
    color: white;
    text-align: right;
    padding-right: 22px;
}

input[type=submit]:active {
    box-shadow: inset 0 -3 5px rgba(0,0,0,.5);
    background: -webkit-linear-gradient(top, #649126, #7DB731);
}