更改輸入類型= 「file」上的遊標類型

問題描述

簡單的問題… 如何在文件輸入類型上更改光標類型？

我嘗試過以下操作：

<!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>

由於某種原因，它不會打球。

最佳解決方案

我在這裏用 jquery 做了一個解決方案：http://jsfiddle.net/gKVKm/36/

看看 here 看看發生了什麼：

它適用於 Opera，Safari，IE，Chrome 和 Firefox 。

次佳解決方案

它在不同的瀏覽器中的工作方式不同。我猜這是因為文件輸入類型是非常特別的。

你使用什麼瀏覽器/版本？

我知道 IE6 不支持在樣式中指定類型。

它在不同瀏覽器中的工作原理

IE7 +

工作完美

FireFox

問題是固定的，所以現在它的工作完美。有關此問題，請參閲 bug report 。在版本 3.5 中，它根本沒有工作。

Chrome 和 Safari(相同的行為)

使用箭頭按鈕，但您定義的光標在其餘部分。

Opera

工作完美

請注意，有幾種解決方法使用不同的技術來解決這個問題。 answer by 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 上工作。

第四種方案

如果你想強制光標為了把它放在一個圖像上，這裏是一個

簡單的方式，它在所有瀏覽器中如何工作：

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;" />

第五種方案

知道這是一箇舊線程。但是谷歌的結果帶來了這個… 我剛剛發現了一個部分的解決方案的 chrome(不是無效的 Flash，javascript，額外的 DOM 操作與溢出隱藏)

firefox 已經修復了這個 bug
safari(此時為 7)， chrome 不具有相同的行為
safari(7，mac)dosen’t 為我工作
chrome(也可能是 Opera 當它的 webkit) 可以使用:: webkit-file-upload 按鈕 pseudo-class

。

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

問題是按鈕’s doesn’t 繼承了一般 (?)的遊標屬性，但其餘的輸入 [type = file] 字段的劑量。這就是為什麼 chrome 得到指針，除了按鈕

第六種方案

我今天遇見了這個問題：

/* 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;
}

似乎做得很好:-)

第七種方案

我做了以下：

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

對於李：

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

輸入：

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

如前所述，光標在整個輸入上變為”pointer”，不包括按鈕。在大多數瀏覽器中，按鈕位於左側或右側。好！讓輸入一個巨大的寬度，只顯示中間… 按鈕將被隱藏。可點擊是整個輸入。

這對我行得通。

參考文獻

Change cursor type on input type=「file」 [duplicate]

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

更改輸入類型= 「file」上的遊標類型