한때 파일 버튼 CSS에 대해서 짜증나리 만큼 히스테리를 가진적이 있었다. 작업해본사람은 알겠지만, 정말 짜증나는 작업이다. 사후 관리도 코드가 지저분해져서 보기 싫고..

일반적인 Input 버튼의 CSS는 그나마 설정이 편하고, 몇가지만 신경쓰면 되지만..

일반적으로 사용하는 파일버튼 디자인은 CSS가 아니라 그냥 개조수준이고, 지금도 아직 그렇게 알려지고 있다.

XP시대가 끝나서 정말 다행이다 ㅋㅋㅋㅋ

일단 이건 내가 사용하는 INPUT 스타일이다.
이 단순함과 깔끔함 얼마나 아름다운가 ㅋㅋ~~

Select Box 는 일단 제외하고, 중요한건 파일박스다.

그리고 이 소스에는 한가지 팁이 더 들어 있는데, 바로 input text 박스의 높이다.

====height:24px;line-height:1.0;
Input Text 의 높이를 IE와 외 브라우저에서 맞추기 위해서 필요한 코드다. 이 간단한 코드 하나로, IE에서 높이와 폰트 위치가 제위치를 잡는다.~

높이를 잡기 위해서 line-height 만 쓰면 IE에서는 이게 안먹힌다 그래서 height도 같이 써줘야 하는데 그렇게 되면 또 이게 좋은 결과물을 보여주지 않는다.

그래서 사용하는 방법이 line-height:1.0; 이다. 얼마나 알흠다운가~ ㅋ

====input[type=file]::-webkit-file-upload-button
이건 IE이외의 브라우저에서 통한다. 버튼을 바꿀때 유용하다.

====input[type=file]::-ms-value // 값 영역
====input[type=file]::-ms-browse // 버튼 영역
IE는 두가지가 있는데 값 부분과 버튼 영역을 각각 지정할수 있다. 그럼 어렵게 파일버튼을 숨기고, 자바스크립트 끌어오고 하는 몰상식한? 구 작업을 안할수 있다.

지저분한 코드 없이 사용하는 File 스타일시트 얼마나 아름다운가? ~~ㅋ

~~사실 태그 자체에 css 를 입히는건 그다지 좋은 방법은 아니지만... 뭐 어때 ㅎㅎ 알아서 잘 이용하면 됨~