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

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 的主 div 中管理它。边框显示准确，但我想要这样

Answer 1

添加样式

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

到.search:after

DEMO