樣式表單輸入登錄

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發送焦點輸入框上點擊

那就是至上在我心裏。