<div class="wrapper">

  <p>데스크톱에서 봐야 제대로 보입니다. 관찰에 좋게 밑줄은 2px로 했습니다.</p>

  <div>1. focus시 border-bottom 생성: 글자가 위로 움찔</div>
  <div class="search-form">
    <input class="search-field" placeholder="검색어를 입력하세요">
    <button>검색</button>
  </div>

  <div>2. 투명 밑줄을 미리 넣어둠: 안정적, 트랜지션 가능</div>
  <div class="search-form">
    <input class="search-field2" placeholder="검색어를 입력하세요">
    <button>검색</button>
  </div>

  <div>3. 그냥 box-shadow: 밑줄이 버튼보다 좀 아래라서 조금 어색</div>
  <div class="search-form">
    <input class="search-field3" placeholder="검색어를 입력하세요">
    <button>검색</button>
  </div>

  <div>4. inset box-shadow: 좋음</div>
  <div class="search-form">
    <input class="search-field4" placeholder="검색어를 입력하세요">
    <button>검색</button>
  </div>

  <div>5. inset box-shadow에 투명 그림자를 미리 넣어 둠: 더 좋음, 트랜지션 가능</div>
  <div class="search-form">
    <input class="search-field5" placeholder="검색어를 입력하세요">
    <button>검색</button>
  </div>

  <div>6. outline을 억지로 사용: 1px 밑줄을 못 그음, 버튼까지 덮지 않게 하려면 right에 고정값을 줘야 함, 이렇게 가상요소와 position: absolute를 사용한다면 그냥 border를 사용해도 됨 - absolute는 기존 레이아웃에 영향을 미치지 않음.</div>
  <div class="search-form  search-form--outline">
    <input class="search-field6" placeholder="검색어를 입력하세요">
    <button>검색</button>
  </div>

  <ul>
    <li>outline은 밑줄만 넣을 수가 없어서 이 경우엔 사용이 힘듦.</li>
    <li>트랜지션을 넣으려면 투명색이 먼저 있는 게 좋음.</li>
  </ul>

</div>
input,
textarea,
button,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

.search-form {
  display: flex;
  margin-bottom: 3rem;
  margin-top: 0.5rem;
}

p:first-child {
  margin: 0 0 3rem;
}

.search-field {
  border: 0;
}

.search-field:focus {
  border-bottom: 2px solid #bbb;
  outline: none;
}

.search-field2 {
  border: 0;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.3s;
}

.search-field2:focus {
  border-bottom: 2px solid #bbb;
  outline: none;
}

.search-field3 {
  border: 0;
}

.search-field3:focus {
  box-shadow: 0 2px 0 0 #bbb;
  outline: none;
}

.search-field4 {
  border: 0;
}

.search-field4:focus {
  box-shadow: inset 0 -2px 0 0 #bbb;
  outline: none;
}

.search-field5 {
  border: 0;
  box-shadow: inset 0 -2px 0 0 transparent;
  transition: box-shadow 0.3s;
}

.search-field5:focus {
  box-shadow: inset 0 -2px 0 0 #bbb;
  outline: none;
}

/* 아웃라인 버전 */
.search-form--outline {
  position: relative;
  display: inline-flex;
  &:focus-within:before {
    position: absolute;
    content: '';
    bottom: 0;
    outline: 1px solid #bbb;
    left: 0;
    right: 48px;
  }
}

.search-field6 {
  border: 0;
}

.search-field6:focus {
  outline: none;
}

html {
  font-size: 1.1em;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

.wrapper {
  padding: 20px;
  max-width: 500px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.