Search form border-left only
The search input with border-left and submit icon only.
Thumbnail

PugSCSS
form.uk-position-relative(method='get' action="" style='height: 42px;') input.uk-input.text-small.input-keyword(type='text' max='100' name='s' placeholder='輸入關鍵字...' style='padding:0 0 0 15px') span.uk-position-center-left button.uk-position-center-right(type='submit') img(src='img/icon-search_orange.svg' uk-svg) img(src='img/icon-search_orange.svg')
.input-keyword { & + span { width: 1px; height: 20px; display: block; background-color: #efefef; } & + span + button img:first-child + svg { display: block; } & + span + button img:last-child { display: none; } &:focus { background-color: #efefef; & + span { background-color: #707070; } & + span + button img:first-child + svg { display: none; } & + span + button img:last-child { display: block; } } }
Tags: