CSS表单提交样式

Question

我正在制作一份CSS / HTML提交表单，我将在下面提供如下图片。

我不知道如何使“提交”按钮看起来像是在文本输入中？

Answer 1

将具有确切背景颜色的容器div放置为文本框。通过这样做，您可以获得按钮位于文本框内的效果。

Answer 2

很简单，把它放在div中并将div设置为看起来像输入文本。然后你只需使输入字段具有与div相同的背景。

Answer 3

我使用blog做了类似的事情，用于使用相对定位提交评论。使用此方法不需要任何额外的HTML标记。

首先将提交按钮直接放在文本输入的下方和右侧，然后将其向上移动，并相对定位到文本输入中。这样的事情应该有效。

input[type="text"] {  <-- Your text input (height comes out to 35px with padding)
    height: 25px;
    padding: 5px;
    margin-bottom: 0;
}

input[type="submit"] { <-- Your submit button (10px shorter for padding)
    height: 25px;
    position: relative;
    bottom: 35px;
    right: 5px;
    margin-top: 0px;
    margin-bottom: -30px; <-- To get rid of the empty leftover space.
}