type='file' 입력 상자 스타일을 조작하는 방법-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

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

php中世界最好的语言

Jan 26, 2018 am 10:15 AM

file input quot

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7467

Cakephp 튜토리얼

1376

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Hongmeng 네이티브 애플리케이션 무작위 시 Feb 19, 2024 pm 01:36 PM

오픈 소스에 대해 자세히 알아보려면 다음을 방문하세요. 51CTO Hongmeng 개발자 커뮤니티 https://ost.51cto.com 실행 환경 DAYU200:4.0.10.16SDK: 4.0.10.15IDE: 4.0.600 1. 애플리케이션을 생성하려면 파일을 클릭합니다. >새파일->CreateProgect. 템플릿 선택: [OpenHarmony]EmptyAbility: 프로젝트 이름 shici, 애플리케이션 패키지 이름 com.nut.shici 및 애플리케이션 저장 위치 XXX(한자, 특수 문자, 공백 없음)를 입력합니다. CompileSDK10, 모델: 스테이지. 장치

Java의 File.length() 함수를 사용하여 파일 크기를 가져옵니다. Jul 24, 2023 am 08:36 AM

파일 크기를 얻으려면 Java의 File.length() 함수를 사용하십시오. 파일 크기는 파일 작업을 처리할 때 매우 일반적인 요구 사항입니다. Java는 파일 크기를 얻는 매우 편리한 방법, 즉 길이( ) File 클래스의 메서드입니다. 이 기사에서는 이 방법을 사용하여 파일 크기를 가져오는 방법을 소개하고 해당 코드 예제를 제공합니다. 먼저, 크기를 구하려는 파일을 나타내는 File 객체를 만들어야 합니다. File 객체를 생성하는 방법은 다음과 같습니다: Filef

PHP Blob을 파일로 변환하는 방법 Mar 16, 2023 am 10:47 AM

PHP Blob을 파일로 변환하는 방법: 1. PHP 샘플 파일을 생성합니다. 2. "function blobToFile(blob) {return new File([blob], 'screenshot.png', { type: 'image/jpeg' })를 통해 } ” 메소드를 사용하여 Blob을 파일로 변환할 수 있습니다.

Java의 File.renameTo() 함수를 사용하여 파일 이름 바꾸기 Jul 25, 2023 pm 03:45 PM

Java의 File.renameTo() 함수를 사용하여 파일 이름을 바꿉니다. Java 프로그래밍에서는 파일 이름을 바꿔야 하는 경우가 많습니다. Java는 파일 작업을 처리하기 위해 File 클래스를 제공하며 renameTo() 함수는 파일 이름을 쉽게 바꿀 수 있습니다. 이 기사에서는 Java의 File.renameTo() 함수를 사용하여 파일 이름을 바꾸는 방법을 소개하고 해당 코드 예제를 제공합니다. File.renameTo() 함수는 File 클래스의 메서드입니다.

vue3에서 입력 구성 요소 및 통합 양식 데이터를 캡슐화하는 방법 May 12, 2023 pm 03:58 PM

준비 vuecreateexample을 사용하여 프로젝트를 생성합니다. 매개변수는 대략 다음과 같습니다. 기본 입력을 사용합니다. 기본 입력은 주로 값과 변경 시 동기화되어야 합니다. App.tsx는 다음과 같습니다: import{ref}from'vue';exportdefault{setup(){//username은 데이터 constusername=ref('Zhang San');//입력 상자가 변경되면 데이터 동기화 constonInput =;반환( )=>({

Java의 File.getParentFile() 함수를 사용하여 파일의 상위 디렉토리를 가져옵니다. Jul 27, 2023 am 11:45 AM

Java의 File.getParentFile() 함수를 사용하여 파일의 상위 디렉터리를 가져옵니다. Java 프로그래밍에서는 파일과 폴더를 조작해야 하는 경우가 많습니다. 파일의 상위 디렉토리를 가져와야 할 경우 Java에서 제공하는 File.getParentFile() 함수를 사용할 수 있습니다. 이 문서에서는 이 함수를 사용하는 방법을 설명하고 코드 예제를 제공합니다. Java의 파일 클래스는 파일과 폴더를 조작하는 데 사용되는 주요 클래스입니다. 파일 속성을 얻고 조작하는 다양한 방법을 제공합니다.

Java의 File.getParent() 함수를 사용하여 파일의 상위 경로를 가져옵니다. Jul 24, 2023 pm 01:40 PM

Java의 File.getParent() 함수를 사용하여 파일의 상위 경로를 가져옵니다. Java 프로그래밍에서는 파일과 폴더를 조작해야 하는 경우가 많습니다. 때로는 파일이 있는 폴더의 경로인 파일의 상위 경로를 가져와야 하는 경우가 있습니다. Java의 File 클래스는 파일이나 폴더의 상위 경로를 가져오는 getParent() 메서드를 제공합니다. File 클래스는 파일 및 폴더에 대한 Java의 추상 표현입니다. 이는 파일 및 폴더를 작동하기 위한 일련의 메소드를 제공합니다. 그 중, 얻으세요.