Иллюзия присоединился полей ввода

Question

Я пытаюсь воссоздать самозагрузки внешний вид полей ввода при этом они выглядят соединены друг с другом в одной коробке, как это:

Может кто-нибудь дать мне руку с CSS, используемой для создания этого эффекта?

HTML:

<div> 
    <input type='text' placeholder='email' /> 
    <input type='text' placeholder='password' /> 
</div> 

Answer 1

Помните, что вы можете установить границы радиуса индивидуально, так:

.joined input{ 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance:  none; 
    border:1px solid; 
    display:block; 
    margin:0; 
    padding:4px; 
} 

.joined input:nth-child(1) { 
    border-radius: 4px 4px 0 0; 
} 
.joined input:nth-child(2) { 
    border-radius: 0 0 4px 4px; 
    border-top: none; 
} 

Он re является примером: http://jsfiddle.net/2nc9j/

Answer 2

Есть несколько вариантов, но в целом вы должны играть с полями, границами и радиуса границы. Например:

сайтов:

<div> 
    <input type=text class="topInput"> 
    <input type=text class="bottomInput"> 
</div> 

Css:

input{ 
    display:block; 
    margin:0px; 
    padding:0px; 
    line-height:0px; 
    border:1px solid gray; 
} 

input.topInput{ 
    border-radius:4px 4px 0px 0px; 
    border-bottom:none; 
} 

input.bottomInput{ 
    border-radius:0px 0px 4px 4px; 
} 

http://jsfiddle.net/_abl/AhK7D/