박철순
input에는 ::after, ::before 적용이 안됨 본문
HTML에서 input 태그 중 (checkbox,radio)를 제외하고는 적용이 안됨
밑에 나와있는 링크에 이유가 나와 있습니다.
https://news.hada.io/topic?id=2781
왜 CSS ::before 는 input과 img에는 동작하지 않을까 | GeekNews
- ::before 와 ::after 는 replaced elements에는 동작 하지 않음ㅤ→ audio, canvas, embed, iframe, img, input, object, video- 이 개체들은 HTML스펙상 브라우저에 의해 ::before, ::after를 다 포함해서 대체되기 때문에 동작
news.hada.io
Can I use a :before or :after pseudo-element on an input field?
I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span, it works OK. <style type="text/css"> .mystyle:after {content:url(smiley.gi...
stackoverflow.com
그래서 input에 text에 '막대기 애니메이션'을 하기 위해서
::after, ::before이 아닌, 태그(div,span)를 통해서 애니메이션 처리해야 합니다.
그리고 그 태그는 input에 focus 값을 통해 state값 변화를 주고, 그에 따른 CSS 처리하는 방법이 있습니다.
'CSS' 카테고리의 다른 글
| 원형 파동 애니메이션 (0) | 2022.07.24 |
|---|---|
| Chrome에서 TextArea에 살짝 뜨는 문제 (0) | 2022.07.19 |