집 >웹 프론트엔드 >HTML 튜토리얼 >type='file' 입력 상자 스타일을 조작하는 방법

type='file' 입력 상자 스타일을 조작하는 방법

php中世界最好的语言원래의: 2018-01-26 10:15:102540검색

이번에는 type="file" 입력 상자 스타일을 조작하는 방법과 type="file" 입력 상자 스타일을 조작할 때 주의사항이 무엇인지 보여드리겠습니다.

type="file"의 입력은 무엇인가요?

이게 뭔지는 굳이 말할 필요도 없을 것 같고, 어차피 다들 알고 있고, 다양한 휴대폰 시대에는 직접 사진을 찍어 업로드할 수도 있다는 게 예전보다 훨씬 재미있네요.

그리고 예전에는 하나의 파일만 업로드할 수 있었습니다. 이제는 여러 속성을 추가하여 여러 파일을 업로드할 수 있으며, 지원되는 파일 형식도 다양하니 자세한 내용을 확인하세요

함께 플레이한 친구들 CSS 우리 모두 알고 있듯이 HTML 요소 중에서 양식 컨트롤 요소의 스타일 수정이 가장 고통스럽습니다. 많은 컨트롤의 스타일이 시스템 테마에 따라 변경되므로 수정하려면 시뮬레이션만 하면 됩니다. , 특히 IE 브라우저 에서는 더욱 그렇습니다.

type="file"인 업로드 버튼의 경우 스타일을 수정한 적이 있습니다. 어떤 사람들은 시뮬레이션 방법을 사용하지만, 시뮬레이션 방법을 사용하면 소위 보안 문제가 발생할 수 있다고 합니다. 나한테는 페이지나 그림을 아는 사람은 그것을 이해하지 못하고, 이해한다 해도 어떻게 대처해야 할지 모릅니다. 그럼 시뮬레이션하지 마세요...

하지만 시뮬레이션하지 않으면 스타일을 어떻게 수정할 수 있나요?

이미지 포지셔닝 오버레이 솔루션

이전에는 type="file"의 업로드 버튼을 투명하게 만든 다음 이미지 위에 겹쳐서 볼 수 있도록 하는 방법이 저만 알고 있었고, 사실 다들 알고 계실 겁니다. 업로드 이미지를 클릭하면 달성되며 기본 업로드 버튼을 볼 필요가 없습니다.

<input type="file" id="upfile" ><span ></span>.up_icon,.up_input {position: absolute;top: 10px;left: 10px;width: 64px;height: 64px;z-index: 2}.up_icon {overflow: hidden;font-size: 0;line-height: 99em;background: url(http://sfault-image.b0.upaiyun.com/346/967/3469672357-54250d7235406_articlex) no-repeat 0 0;z-index: 1;}

포지셔닝을 통해 업로드 버튼을 이미지 위에 배치한 다음, 불투명도를 설정하면 이 코드에서 명확하게 알 수 있습니다. 업로드 버튼의 투명도를 0으로 설정합니다. 이 버튼은 더 이상 볼 수 없지만 실제로 존재하며...그런 다음...더 이상 없고 효과가 있습니다...

웹킷에 대한 솔루션

웹킷 커널에 대한 이 솔루션은 실제로는 약간 말도 안되는 내용입니다. 웹킷 커널에만 효과적이므로 -webkit- 접두어가 있는 작성 방법이 지원되지 않으면 아무런 효과가 없습니다. 그러니 그냥 재미로 가져가셔도 됩니다.

<input type="file" id="upfile">input[type="file"]::-webkit-file-upload-button {position: absolute;top: 10px;left: 10px;width: 64px;height: 64px;overflow: hidden;line-height: 99em;background:url(http://sfault-image.b0.upaiyun.com/346/967/3469672357-54250d7235406_articlex) no-repeat 0 0;border: 0 none;z-index: 2;}

이 코드의 HTML 구조는 매우 간단합니다. [input 태그만 있으면 충분합니다. 이전에 본 방법보다 훨씬 간단하지만 호환성 측면에서는 확실히 훨씬 나쁩니다. 요즘 대부분의 모바일 단말기는 웹킷 기반 브라우저입니다. 잊어버리세요. 그냥 오락으로 여기고 즐기세요~

간단한 HTML 구조 수정 스타일은 다음 사항에 전적으로 의존합니다. :-webkit-file- 업로드 버튼 의사 요소의 경우, 이 의사 요소의 스타일에 해당하는 수정만 하면 됩니다. 이는 일반적인 버튼 요소이기 때문입니다. Shadow DOM을 표시하여 이 버튼 요소를 보면 더 명확해집니다.

이것은 Chrome 개발자 도구에 표시되는 DOM 트리입니다. 일반적으로 Shadow DOM 보기를 활성화하지 않으면 type="file" 입력에 너무 많은 콘텐츠가 포함되어 있음을 알 수 없습니다. 켜는 방법은 매우 간단합니다. 개발자 도구의 오른쪽 상단에 있는 기어를 클릭한 다음 팝업 레이어에서 이 상자를 선택하면 됩니다.

이제 독자는 Shadow DOM이 있는 경우 다른 입력 태그를 직접 확인할 수 있습니다. 그런 다음 새로운 HTML5 태그 중에는...

마지막으로

type="file"의 입력 태그에 대해 현재 스타일을 수정하는 방법은 두 가지 뿐이고 웹킷의 경우 해결책은 다음과 같습니다. 또한 매우 제한적이지만 휴대폰에는 문제가 되지 않습니다. 어떤 사람들은 다른 브라우저에서는 어떻게 해야 합니까? 예, 어떻게 해야 할지 모르겠습니다.

Firefox 브라우저에는 form.css에 input type="file" > 버튼[type="button"]이 있는데 왜그런지는 모르겠지만 이 선택기를 제 스타일로 추가했습니다. , 그래도 효과가 없어서 플레이를 중단했습니다.

PS: form.css 파일의 경우 Firefox 브라우저의 팬이라면 리소스://gre-resources/forms.css 경로의 존재를 알아야 합니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!