[HTML, CSS] input창 클릭 시 CSS적용하는 방법(focus, animation

HTML CSS

---

input focus effect

input 태그를 클릭했을 때 요소에 스타일을 적용하는 간단한 예시입니다.

 

마우스 클릭이나 탭 변환 등으로 커서가 진입했을 때 발생하는 이벤트는 focus입니다. 여기에 스타일을 적용하기 위해서는 css에서 :focus 가상 클래스에 속성을 적용하면 됩니다.

 

예시

input 태그가 있습니다.

<input class="my-input" type="email" name="email" placeholder="이메일을 입력하세요" />

.my-input {
  padding: 10px;
  width: 250px;
  outline: none;
  border: 1px solid gray;
}

---

---

input 태그에 커서가 들어오면 border 색상을 바꾸고, boder-radius 애니메이션 효과를 주는 코드입니다.

.my-input {
  padding: 10px;
  width: 250px;
  outline: none;
  border: 1px solid gray;
}

.my-input:focus {
  animation: round 1s forwards;
}

@keyframes round {
  from {
    border-radius: 0;
  }
  to {
    border-radius: 30px;
  }
}

---

---