Граница между текстом поиска и кнопкой поиска в окне поиска

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

На самом деле, вы можете получить желаемый результат только с помощью CSS.
Отдай свое :after absolute положение и отрицательный margin-top равный дополнению родителя. Затем задайте ему высоту родительского элемента:

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

Демо jsFiddle

Answer 2

Добавьте стили

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

до .поиск: после

DEMO

Answer 3

Вам нужно использовать хотя бы один дополнительный 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 дела.