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

Question

演示

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在输入标签中插入元素，因为它没有结束标签，所以它不起作用。所以我在主 div 中管理了这个.search。边框正在准确显示，但我想要这样

Answer 1

添加样式

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

到.search:after

演示

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-textdiv。

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;
}

演示 jsFiddle