CSS：如何使光標成爲輸入文件上的指針？

如何在光標懸停時將光標變爲輸入文件或輸入文本上的指針？CSS：如何使光標成爲輸入文件上的指針？

我的嘗試，但它並沒有當然的工作，

<input type="file" style="cursor: pointer;"/>

還是我必須使用的javascrip（jQuery的）？

編輯：

對不起我的錯誤 - 光標不會更改爲一個點上

<input type="text" style="cursor: pointer;"/>

但不是

<input type="file" style="cursor: pointer;"/>

您可以測試Firefox上this link然後就看到我的意思是。

只有button的file更改爲指針，但不更改爲file的input field。

編輯2：

Here是我的CSS '黑客'，

<div id="right-col" style="position:relative; width:76px; height:24px; overflow:hidden; border:1px solid #000;"> 
<input type="file" style="position:absolute; top:0; right:0; z-index:2;opacity:1; cursor:pointer;"/> 
</div>

來源

2011-08-23 laukok

它不會成爲'輸入類型= 「文件」'當鼠標移動到按鈕，併爲'INPUT TYPE =「文本指針「當你將鼠標移到文本字段上時。 – BoltClock

是的，它是在按鈕上，但不是當你把鼠標放在'file'的'input field'上時。 – laukok

不要相信這是可能的。但是*爲什麼在地球上*你想要這麼做？文本光標的目的是爲了表明您可以在那裏輸入文本... – animuson

都能跟得上...這是你怎麼做。比較here。

來源

2011-08-23 01:34:02

在Chrome 13中不起作用。 –

我在Firefox 6上，它只適用於按鈕，而不適用於它旁邊的文本字段。 – animuson

13.0.782.112 –

你能砍做這個醜陋的jQuery：

$('input:file').each(function(){ 
    var $input = $(this); 
    $input.before($('<div>').height($input.height()).width($input.width()).css(
     { 
      cursor: 'pointer', 
      position: 'absolute', 
      zIndex: $input.css('z-index') 
     }).click(function(){ 
      $(this).hide(); 
      $input.click(); 
      $(this).show(); 
     })); 
});

但它阻止你通常會看到，當你的mousedown一個按鈕元素的動畫。 JSFiddle

來源

2011-08-23 02:00:25 Paulpro

謝謝。一個很好的黑客，但它不能在opera上工作 - 對話框彈出不再顯示。看到我的編輯上面我的解決方案。謝謝。 – laukok

無法完成。輸入類型文件是瀏覽器最受保護的對象之一。有些瀏覽器允許你做比別人更多的事情，取決於他們認爲的「安全」。

您可以使用閃光燈按鈕。事實上，有很好的插件可以讓文件上傳更好的東西，比如Uploadify。

來源

2011-08-23 02:05:44

http://stackoverflow.com/questions/4532733/styleize-input-type-file – Tech4Wilco

這不是造型輸入文件，這是隱藏它。 –

你可以把圖片代替，而像這樣做：

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'); 
});

CAVEAT：在IE9和IE10如果您觸發在通過JavaScript輸入文件中的onclick表單被標記爲'危險'，不能用javascript submmited，不知道如果它可以傳統提交。

來源

2014-01-28 05:16:36 ParPar

您可以嘗試使用輸入類型「file」的任何包裝。

<label for="photo"><span class="button">CHOOSE A FILE</span></label>

入住此... http://jsfiddle.net/pFK74/

來源

2014-05-14 10:51:04 Imran

CSS：如何使光標成爲輸入文件上的指針？

回答

相關問題