webkit css filter
Written on 2008.01.23, 4:47 pm by jay
언제해도 귀찮은 form디자인을 하는도중 safari에서 문제가 생겼다.
어두운 배경위에 file input이 올라가는 디자인인데 safari의 file input이 워낙 독특하게 생긴지라 텍스트컬러가 배경에 묻혀서 보이질 않는다.
(잘보면 choose file 버튼 뒤에 “no file selected”가 숨어있다. -_-)
구글신이 알려주신 CSS hacks series의 webkit filter로 해결할 수 있었다.
/* webkit only filter */
@media all and (min-width: 0px) {
body:not(:root:root) input[type="file"] {color: #fff;}
}잠시 삼천포 하나:
form요소를 디자인하는것은 시스템차원의 global한 form요소와 디자인이 달라져서 접근성측면에서 안좋다는 의견도 있지만 내 생각은 다르다.
사이트에 녹아드는 동일한 인터페이스를 구축해주는것이 넓은의미에서의 접근성 확보가 아닐까? 게다가 이왕이면 다홍치마라는 속담도 있고 말이지.
