Programing

입력 유형 = "파일"에서 커서 유형 변경

lottogame 2020. 10. 24. 09:24
반응형

입력 유형 = "파일"에서 커서 유형 변경

이 질문에 이미 답변이 있습니다.

간단한 질문 ... 파일 입력 유형에서 커서 유형을 어떻게 변경합니까?

나는 다음을 시도했다 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style>
            input[type="file"] {
              cursor: pointer;
            }
        </style>
    </head>
    <body>
        <input type="file">
    </body>
</html>

어떤 이유로 공을 치지 않습니다.

브라우저마다 다르게 작동합니다. 파일 입력 유형이 매우 특별하기 때문이라고 생각합니다.

어떤 브라우저 / 버전을 사용하십니까?

IE6가 스타일에 유형을 지정하는 것을 지원하지 않는다는 것을 알고 있습니다.

다른 브라우저에서 작동하는 방법

IE7 +

완벽하게 작동합니다.

FireFox

문제가 해결되었으므로 이제 완벽하게 작동합니다. 이 문제에 대한 버그 보고서 를 참조하십시오 .
버전 3.5에서는 전혀 작동하지 않았습니다.

Chrome 및 Safari (동일한 동작)

버튼 위에 화살표를 사용하지만 나머지 위에 정의 된 커서를 사용합니다.

오페라

완벽하게 작동합니다.

이 문제를 해결할 수있는 다양한 기술을 사용하는 몇 가지 해결 방법이 있습니다. BjarkeCK 의 대답 은 내가 좋아하는 우아한 솔루션이며 모든 주요 브라우저에서 작동합니다.

cursor:pointer기본 버튼 때문에 입력 파일에서 작동하지 않습니다. 여기에 특별한 이유가 없습니다. 이 코드를 통해 모양을 제거해야하며 font-size:0.

input[type='file']{
    opacity: 0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    font-size: 0;
    position: absolute;
}
<input type="file">
<img width="24" height="24" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADs0lEQVR42rWVa2iOYRjH9+zd+dw2oWaGwkjzRY5flDC1nBaxsTnVYkaWc8oHoZalETWHsVGkZo0yIyEmGzkWpZhDbBhmxE7v63fp/0j7YGq89e/+XfdzuJ7/dV/3/Tp+//nndHdD2o4RIQHBnilgIPL3+XytjuO0MkZ4O3zllevve3uUYMaulDxeePL0mruNXeaTmJ/IfMlfJZhekBLv+PuNBEPRq8427wN/jxPmeJxM4seoAH0yF+g9WonmVOTfK+o2weTNyZ6w2KC9fNFuQtz7AuF0+DV8Ft4GZ6OvxPXE7xlLGZ8wF4CLK39MMLNwZDoPJPPAHcJwOAiOhp/Ct+Ba3d9J/I3YEjUzTmNuNuwHd8DtcAg8FK4ica2jeuYyFKM4cyB1aGEz0BoUYw6QLWoEakLLUY25UOl+foSubaB8O1wHmWS+R+YadUojbEmi4WjYo4Rv5SCWMdic2LzYEjfBAXAynImDI78nqOXCWcIk2KsHgmB/+ARs6/BE8UDGuYw5KmkbfA5O1QckwfNJUOqWaCnDdVRuL5WsXO1oobrIXpYgJ9W6N9VKgdZRjmreUwqPReYgg7mjroMlZL5K5v2E8XA/2JKshc9okfui78QNxLaYdxgteQkcCVfCW+HX8LiuDqwFr6Ey1B/1Rm/QMJSP8lCkus4cNNheQbt032G5s4+qR8PRIhwccB1kk/kmmSsIB8GdcDVfkEbyU/B45ntZt3Ctg9icfGQ8zdwW+AY8WG36UA7m8XyZm2CxbrqkElmC2/AE+DKcCMeaC/W8nUUtWthVcJ0WtlXNMhmeS4LjXbvoolmF22ErwSh4BTzTuguFaRPadm9iXG0NAFfA1hQvtEaT4CwSHHLXYBHDLWQJ4lXnp2ifuuUYStRC2zPB6LwdYagQzdImeydNtaOFNTjoOsiSTXuot3q9BW6Bc+E62Hb7EOJQ4irGYsY5zO2E4+FmrYE5GA0vsJPWTbBMtbZWG6AyeJXgkxbTDsKXWoPBKp3tn2DY0c5vhp/BY7TIv9p0idrUNlAfnS3uUW6J3uqsaZM8OnPsQAyRfLr3g1rd2rTYdZAjB0WyGadzphHuBQfqhd+I39jX6p5OObCjIspaWQ7NQQ4OitwEm7hQRMYvfv/gx/vM2UIS7HFLtFG7tUUd1C67Udqdn63HVYpoufmuebtuR/kXlS9cu3w7H3zBTWB/laOxlqDNlABbu37VUWw9bn+lIdrBnxljbMPpno/6w7Hj/B383E4GEjzq9k+/p78fan0xNyGwEGgAAAAASUVORK5CYII=" />

Chrome, Firefox 및 IE에서 완벽하게 작동합니다.

이것은 오래된 스레드를 알고 있습니다. 그러나 구글 결과는 이것을 가져옵니다 ... 나는 크롬에 대한 부분적인 해결책을 찾았습니다 (플래시, 자바 스크립트, 오버플로가 숨겨진 추가 DOM 조작이 아님)

  • firefox가이 버그 를 수정했습니다.
  • 사파리 (현재 7)와 크롬은 동일한 동작을하지 않습니다.
  • safari (7, mac)는 전혀 작동하지 않습니다.
  • chrome (그리고 아마도 웹킷 일 때 오페라)는 :: webkit-file-upload-button pseudo-class를 사용할 수 있습니다.

.

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
    cursor: pointer; 
}

문제는 버튼이 일반적으로 커서 속성 (?)을 상속하지 않고 나머지 input [type = file] 필드 용량을 상속한다는 것 입니다. 그래서 크롬은 버튼을 제외한 포인터를 얻습니다.

저는 오늘이 문제를 다음과 같이 만났습니다.

/* Chrome/Safari and web-kit-based browsers 
   (if it doesn't work, try maybe also on the parent/wrapper)
*/
::-webkit-file-upload-button {
    cursor:pointer;
}

/* IE11 (if it doesn't work, try maybe also on the parent/wrapper) */
input[type=file] {
    cursor:pointer;
}

잘하는 것 같습니다 :-)

이미지 위에 커서를 놓기 위해 커서를 강제로 움직이려 면 다음과 같이하십시오.

모든 브라우저에서 간단한 방법 및 작동 방식 :

HTML :

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery :

$("#upfile1").click(function () {
     $("#file1").trigger('click');
});

그런 다음 아무 버튼이나 눌러 파일을 업로드 할 수 있으며 포인터 커서가 있습니다.

Chrome 및 Opera에서 커서는 패딩의 포인터가되며 인 경우 display:block;이러한 브라우저에서 다음을 수행해야합니다.

<input type="file" id="file1"  name="file1" style="display:block; padding:29px 0 0 0;" />

다음을 만들었습니다.

<li>file<input id="file_inp" type="file" /></li>

li의 경우 :

li { /*...*/ position:relative; overflow:hidden; /*...*/ }

입력 :

input#file_inp { 
    /*...*/ 
    position: absolute; 
    width: 400px; 
    left: -200px; 
    top:0; 
    cursor: pointer; 
    /*...*/ 
}

앞서 언급했듯이 커서는 버튼을 제외한 전체 입력에서 "포인터"가됩니다. 대부분의 브라우저에서 버튼은 왼쪽 또는 오른쪽에 있습니다. 확인! 입력에 큰 너비를 부여하고 가운데 만 표시합니다. 버튼이 숨겨집니다. 그리고 클릭 가능은 전체 입력입니다.

그것은 나를 위해 작동합니다.

Ajax 업 로더를 수행하려는 경우 FireFox 및 Chrome과 같은 호환되는 브라우저에 대해 다른 기술을 시도 할 수 있습니다. 완전히 보이지 않는 파일 입력에 대한 클릭 이벤트 트리거를 지원합니다. 표시 속성을 없음으로 설정하는 것을 제외하고는 원하는 방식으로 파일 입력을 숨길 수 있습니다. 설정 {높이 : 0; 오버플로 : 숨김} 부모 양식이 트릭을 수행합니다. 업 로더마다 별도의 양식을 사용합니다.

사용자 정의 버튼 클릭 이벤트를 숨겨진 파일 입력으로 리디렉션하면 완료됩니다.

이 기술을 사용하려면 Gecko 또는 WebKit 엔진에 대해 navigator.userAgent 검사를 수행해야합니다. 다른 엔진의 경우 이전 투명 파일 입력 방법을 사용해야합니다.

나는 그것을 만드는 또 다른 접근법이 있다는 것을 알았습니다. Opera New, FF, Chrome 및 Safari에서 완벽하게 작동합니다. 불행히도 IE에서는 완벽하게 작동하지 않습니다 (하지만 제 경우에는 충분합니다).

아이디어는 input=file고정 크기 div 및 숨겨진 오버플로 및 set로 요소 를 래핑하는 것입니다 cursor: pointer;. 왼쪽 패딩을 사용하여 버튼을 div 외부로 이동하는 것보다.

<div class="input-file-wrap">
    <input class="file-input" type="file" />
</div>

및 샘플 스타일

.input-file-wrap {
    background: red;
    height: 33px;
    width: 240px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.file-input {
    width: 100%;
    height: 100%;
    opacity: 0;
    padding-left: 240px;
    margin-right: -240px;
    cursor: pointer;
}

여기에서 라이브 예제를 찾을 수 있습니다 : http://jsfiddle.net/5c5RH/2/

우선, 코드는 Internet Explorer에서 작동하지만 Firefox에서는 작동하지 않습니다.

둘째, W3C Css 표준은 <input />. 커서 속성에 대해서도.

Endly, see this page. I did not try his solution, so tell us if it works and how.

Chrome was giving me this problem too. I tried to set all sorts of CSS selectors, but nothing seemed to work well. However, I did find a solution by using the FORM element.

  1. name your input[type=file] element.
  2. name your form element and put the input[type=file] in it.
  3. make a span and place it below the input in the form. This will be your label.
  4. use CSS to set the input's height to 0px and opacity to 0, this will make it invisible.
  5. make the span positioned absolutely and to the left 0px.
<style>
    #file {
        height:0px;
        opacity:0;
    }  
    #span {
        left:0px;
        position:absolute;
        cursor: pointer;
    }
</style>

<form name="form">
    <input type="file" id="file" name="file"/>
    <span id="span">My File label!!!!</span>
</form>

<script>
    var span = document.getElementById("span");
    span.onclick = function(event) {
        document.form.file.click(event);
    };
</script>

I tested this in Chrome and FF, not ie, but I hope this helps. jsfiddle http://jsfiddle.net/aressler38/L5r8L/1/

Try using:

input[type=file] {
  cursor: pointer; cursor: hand;
}

See if that works. I've had to put pointer + hand in mine to make it work in FF/Chrome/etc. Also, I'm not sure if it matters but I don't think there are quotes around 'file' in the css.

            <span class="btn btn-success fileinput-button">
                <span><i class="icon-plus icon-white"></i> Select Image</span>
                <input type="file" name="files[]">
            </span>

css:

.btn{cursor:pointer;}

You can see it in action here: http://blueimp.github.com/jQuery-File-Upload/

It's not the jquery doing it. It's the http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css file. I've just grabbed what I needed out of it and it works great without any of the jquery.

Based on https://stackoverflow.com/a/3030174/2325676 - Hide the input using opacity 0.

커서가 전체 영역에서 작동하도록하는 열쇠 font-size는 파일 입력 버튼이 보이는 영역 아래로 밀리고 마우스 호버가 파일 입력의 텍스트 부분에 있도록 버튼의 높이보다 큰 값으로 설정하는 것입니다. :

<div style="display: block; width: 100px; height: 50px; overflow: hidden">
    <button style="width: 110px; height: 50px; position: relative; top: -5px; left: -5px;" ><a href="javascript: void(0)">Upload File</a></button>
    <input type="file" id="upload_input" name="upload" style="height:50px; width: 120px; opacity: 0; filter:alpha(opacity: 0);  font-size: 70px; position: relative; top: -50px; left: -20px; cursor:pointer" />
</div>

내가 한 방법 : 

    /* Upoload */
#upload-profile-file {
    z-index: 1;
}
.uploadButton input[type="file"] {
    cursor:pointer;
    position:absolute;
    top:0px;
    opacity:0;
}
#upload-profile-file:hover ~ #upload-profile-pic-btn
{
    text-decoration:underline;
}

#upload-profile-pic-btn {
    z-index:-1;
}

그리고 내보기 페이지에서 :

  <form id="upload-profile-pic-form">
                                                <div class="uploadButton">
                                                    <input type="file" id="upload-profile-file" name="upload" style="width: 88px; opacity:0.0; filter:alpha(opacity=0); " onchange='upload()'/>
                                                    <a id="upload-profile-pic-btn" href="#" class="expand">Upload</a>
                                                </div>
                                            </form>

그런 다음 AJAX를 통해 양식을 서버에 제출하고 나머지는 처리합니다.

그래서 tl; dr-> 보이는 링크의 클릭 (모든 스타일과 벨과 휘파람 포함)을 전달하고 실제로 파일 입력을 클릭합니다. :)

이것이 누군가를 돕기를 바랍니다.

참고 URL : https://stackoverflow.com/questions/1537223/change-cursor-type-on-input-type-file

반응형

'Programing' 카테고리의 다른 글

“구성 파일 /etc/nginx/nginx.conf 테스트 실패”:이 문제가 발생한 이유를 어떻게 알 수 있습니까?  (0) 2020.10.24
Kotlin 데이터 클래스 용 getter 재정의  (0) 2020.10.24
VBA에서 dim과 set의 차이점은 무엇입니까  (0) 2020.10.24
개체가 매개 변수 유형의 인스턴스인지 테스트  (0) 2020.10.24
Jenkins Pipeline에 시간 초과 단계를 추가하는 방법  (0) 2020.10.24

'Programing'의 다른글

  • 현재글입력 유형 = "파일"에서 커서 유형 변경

관련글

댓글

티스토리툴바