html - 我将如何复制这种输入文本效果，它们几乎是 CSS/HTML 中的合并框？

Question

在 dribbble 上看到这张图。我将如何在 CSS 中创建这种效果？我指的是几乎合并的两个输入字段，并且它们之间有一个非全角分隔符。

Answer 1

像这样的东西：

#inputwrap {
    border: 1px solid #aaa;
    background: #fff;
    width: 180px;
    padding: 10px;
    margin: 20px;
}
#inputwrap input {
    border: none;
    width: 160px;
    padding: 5px 10px;
    outline: none;
}
#inputwrap input:first-child {
    border-bottom: 1px solid #aaa;
}

http://jsfiddle.net/2tHfG/