连接输入字段的错觉

Question

我正在尝试重新创建输入字段的引导外观，以便它们看起来像这样连接在一起：

任何人都可以帮助我使用用于创建此效果的CSS吗？

HTML：

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

Answer 1

请记住，您可以单独设置border-radius，所以：

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

以下是一个示例：http://jsfiddle.net/2nc9j/

Answer 2

有多种选择，但一般情况下你必须使用边距，边框和边框半径。例如：

HTML：

<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/