样式表单输入登录

Question

我想从一个PSD文件

我有几个问题要问写CSS和HTML做出这个输入论坛：

首先我板缺的背景（没有其他图形元素）。标题的风格很简单。我发现输入文本很困难：当用户点击矩形时，文本和图标消失。

这是我的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; 
} 

其中输入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> 

的问题是，小图标不显示，因为背景定义输入文本overwite他们。有一种简单的方法解决这个问题？

还有一种简单的方法可以重现右边的发光效果吗？我想到了将效果与z-index的值相比其他元素的效果更高，但是如果单击表单右侧的按钮或输入文本，显然会出现问题。任何建议？

Answer 1

我在想如果它的实际上可能使这个表格在CSS宽度gradient，所以我试了一下。

这里的结果：Demo

它不是完全一样的画面形式，BYT哎！我不是网页设计师。 通过一些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); 
} 

Answer 2

最简单的解决方案是将图标和发光样式添加到输入背景（对于每个输入不同），然后添加填充左侧输入。 KISS规则;）

Answer 3

如何使用before语句？

input#username:before{ 
    content: url('user-icon.png'); 
} 

http://www.w3schools.com/cssref/sel_before.asp

Answer 4

只剪下阴凉处，并使其绝对定位的div右：0; （假设父级是表单框）

由于阴影框下的元素不可点击（您将有一个矩形显示三角形），因此您必须制作不可见的阴影框OVER阴影框会将输入框对焦单击。

订购的z-index的会是这样的：

1. 输入框
2. 阴影盒
3. 无形的div发送焦点输入框上点击

那就是至上在我心里。