728x90
주민번호 뒷자리 배경처리
입력된 자리수만큼 표시가 되어야 할 경우
input password 와 같은 레벨에 배경 이미지를만들고
input password가 동그란 모양으로 나오기 때문에 입력된 문자열 만큼 배경이미지 위에 가려지는 효과로 작업
.personalNo-2:before {bg:img}
.personalNo-2 input {font-size:60px; color:green}
2. 주민번호 뒷 1자리 표시
뒷 1자리 한정
input을 배경이미지 크기만큼 width를 적용하고
label로 focus 영역을 확장한다
input에 value가 있을때 == placeholder가 없을때 ( input:not(:placeholder-shown) ) input에 배경색상을 흰색으로 덮어서 뒷 배경이미지를 가려준다
ie에서는 :not(:-ms-input-placeholder)
표준 브라우저와 IE는 placeholder 사라지는 시점이 다름
표준브라우저 : keyup시
IE : focus시
'STUDY > CSS' 카테고리의 다른 글
| a href 링크 scroll top margin (0) | 2022.08.26 |
|---|---|
| ios input:disabled value color 바꾸기 (0) | 2022.08.16 |
| [비표준 크로스브라우징] IE와 크롬 col width 계산법의 상이함 (0) | 2021.12.02 |
| SCSS 반응형웹 medeiquery mixin 만들기 (0) | 2021.04.27 |
| javascript 없이 input radio 별점주기 (3) | 2020.03.31 |