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

追加の div を少なくとも 1 つ使用する必要があります。このような ：

<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 に適用できます。