Стиль формы ввода Логин

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; 
} 

где вход-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, поэтому я попробовал.

Вот результат: Demo

Его не так же, как формы в картине, бют эй! Я не веб-дизайнер. И с некоторыми улучшениями от некоторого гениального 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

самым простым решением было бы добавить стиль иконок и свечение во входной фон (разные для каждого входа), а затем добавить padding-left для ввода. Правило KISS;)

Answer 3

что вы используете перед заявлением?

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

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

Answer 4

Вырежьте тень только и сделать его абсолютным расположен ДИВ с правой: 0; (предполагается, что parent - это поле формы)

Поскольку элементы под теней не будут доступны (у вас будет прямоугольник для отображения треугольника), вам нужно будет сделать невидимые divs OVER shade box, которые будут фокусировать поля ввода на нажмите кнопку.

Порядок г-индекса будет выглядеть так:

1. Входные коробки
2. Shade коробка
3. Невидимые дивы, чтобы отправить фокус на поля ввода по нажатию

Вот что приходит первым на мой взгляд.