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: