搜索文本和搜索框中的搜索按钮之间的边界

Question

demo

HTML

<div class="search">
    <input type="text" value="search..." />
    <input type="image" value="Q" />
</div>

CSS

.search{
    width: 400px;
    background-color: gray;
    border-radius: 12px;
    padding: 20px;
}
.search input:first-child{
    width: 300px;
}
.search input:nth-child(2){
    width: 50px;
    height: 20px;
    overflow: hidden;
    background-color: #fff;
    float: right;
    text-align: center;

}
.search:after{
    content: " ";
    border-right: 4px solid red;
    margin-left: 20px;
}

我无法在输入标记中插入:after元素，因为它没有工作，因为它没有结束标记。所以我在主要的.search中管理了这个。边框正好显示，但我想要这样

Answer 1

添加样式

border-top: 20px solid #FF0000;
border-bottom: 20px solid #FF0000;

到 .search：after

<强> DEMO

Answer 2

您需要使用至少一个额外的div。像这样：

<div class="search">
    <div class="search-text">
        <input type="text" value="search..." />
    </div>
    <div class="search-image">
        <input type="image" value="Q" />
    </div>
</div>

您现在可以将边框应用于search-text div。

Answer 3

实际上，您可以使用CSS获得所需的结果 将:after absolute位置和负margin-top等于父级的填充。然后给它父母的高度：

.search:after{
    content: " ";
    border-right: 4px solid red;
    margin-left: 20px;
    height: 66px;
    position: absolute;
    margin-top: -20px;
}

<强> The demo jsFiddle