我有2个文本框(一个在另一个之上),我想消除它们之间的差距。我希望在这里实现文本框的外观 dribble
HTML
<div id="User-Details">
<input type="text" class="textbox-top" id="name" value="Name" />
<input type="text" class="textbox-bottom" id="email" value="Email" />
</div>
CSS
#User-Details input
{
padding: 5px;
color: #999
}
.textbox-top{
border: 1px solid #aaa;
border-bottom: none;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.textbox-bottom{
border: 1px solid #aaa;
border-top: none;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
答案 0 :(得分:2)
尝试这样,很容易
HTML
<div>
<input type="text" placeholder="Username" /><br>
<input type="text" placeholder="Password" />
</div>
CSS
div {
position: relative;
height: 80px;
width: 300px;
margin: 20px;
}
input[type=text] {
padding: 5px;
border: 1px solid #eeeeee;
}
input[type=text]:nth-child(1) {
border-bottom: 0;
}