连接输入字段的错觉

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

下面是一个例子：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;
}

abl/AhK7D/