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

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 элементов ввода тега, потому что он не будет работайте, так как это не имеет закрывающего тега. Так что мне удалось это в главном 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; 
} 

The demo jsFiddle

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 дел.

Answer 3

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

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

к .search: после

DEMO