html - 打包在一起的输入框表单样式

Question

我想知道这种表单样式是否有正式名称：https ://www.tumblr.com/login或https://www.tumblr.com/register 输入框与一行一起打包介于两者之间，如果有，我可以使用现有的库来制作这些表格吗？

Answer 1

它只是一个CSS代码！您应该使用以下代码：

.class {
    border-bottom: 1px solid gray;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    ...
}

您可以将“顶部”更改为“底部”，将“右侧”更改为“左侧”。

Answer 2

这种类型没有具体的名称，至少我不知道。它只是使用 CSS 样式制作的。

tumblr 使用的是这样的东西：

这个 CSS

.signup_form {
background: -moz-linear-gradient(center top , #DDE5ED 0px, #F2F3F4 100%) repeat scroll 0 0 transparent;
border: 1px solid rgba(0, 0, 0, 0.8);
border-radius: 8px 8px 8px 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.36) inset, 0 1px 0 rgba(255, 255, 255, 0.15);
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 245px;
}

.signup_form .row {
border-top: 1px solid rgba(0, 0, 0, 0.12);
position: relative;
}

而这个 HTML

<div id="signup_form" class="signup_form">
    <div class="row">
        <label>Email</label>
    </div>
    <div class="row">
        <label>Password</label>
    </div>
</div>