Archives
10-30 01:25
Today
0
Total
287,080
관리 메뉴

FILife

Vuetify 처럼 BS form-group 에서 placeholder 애니메이션 주기 본문

내가 자꾸 까먹어서 쓰는 개발 이야기/HTML, CSS

Vuetify 처럼 BS form-group 에서 placeholder 애니메이션 주기

FIL 2020. 7. 14. 10:38
.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-control-placeholder {
  position: absolute;
  top: 0;
  padding: 7px 0 0 13px;
  transition: all 200ms;
  opacity: 0.5;
  color: red;
}


.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
  font-size: 75%;
  transform: translate3d(0, -100%, 0);
  opacity: 1;
}

매우 잘 된다.

 

출처: stackoverflow.com/a/58736840

 

How to create an animated form placeholder using pure CSS

I am using Bootstrap-Vue to build a form, and I would like the placeholder text to animate so that it sits on top of the input using CSS Transitions. I currently have this bit of code which is gen...

stackoverflow.com

 

0 Comments
댓글쓰기 폼