如何更改iFrame上的光標「選擇文件」

我正在使用iFrame來模擬<input type="file">。這是它的作用：如何更改iFrame上的光標「選擇文件」

1 - 鏈接顯示"Choose your file"。

2 - 用戶單擊鏈接，瀏覽本地計算機上的文件。

3 - 當用戶選擇文件時，它會自動開始上傳。

這很好。但是，我無法控制遊標的類型。我將如何強制光標是一個指針？

<html> 
    <head> 
     <style> 
     .attach-file:hover { 
      text-decoration: underline; 
      cursor: pointer; 
     } 
     .attach-file { 
      padding-left: 22px; 
      background: url("{{ STATIC_URL }}images/new/attach-file.png") no-repeat 0 1px; 
      color: #0BA5D9; 
      position: relative; 
      top: 0; 
      left: 0; 
     } 
     form { 
      float: right; 
     } 
     html, body { 
      padding: 0; 
      margin: 0; 
      border: 0; 
     } 
     input[type="file"] { 
      z-index: 999; 
      opacity: 0.0; 
      line-height: 0; 
      position: absolute; 
      position: fixed; 
      font-size: 500px; 
      top: -100px; 
      left: -200px; 

      -moz-appearance: none; 
      white-space: nowrap; 
      cursor: pointer; 
      -moz-binding: none; 
     } 

     input[type="file"] > input[type="text"] { 
      border-color: inherit; 
      background-color: inherit; 
      color: inherit; 
      font-size: inherit; 
      height: inherit; 
     } 

     /* button part of file selector */ 
     input[type="file"] > input[type="button"] { 
      height: inherit; 
      font-size: inherit; 
     } 
     input[type="file"]:hover { 
      cursor: default; 
     } 
     * { 
      overflow: hidden; 
     } 
    </style> 
</head> 
<body> 

    <form method="post" action="." enctype="multipart/form-data" style="position: inline"> 
     <label style="overflow: hidden; position: relative;"> 
      <span class="attach-file">Attach File</a> 
      <input type="file" name="attachment" /> 
     </label> 
    </form> 
</body>

什麼我需要添加或更改上述模擬在Firefox光標懸停在iFrame的時候？

來源

2012-07-10 David542

您需要修改HTML代碼，打開''標籤，並關閉''標籤 – Luis 2012-07-10 03:34:36

謝謝，我解決了這個問題，雖然行爲是一樣的。 – David542 2012-07-10 03:42:16

的CSS

input[type="file"]:hover { 
     cursor: default; 
    }

是壓倒其他樣式定義。刪除它，你得到指針光標。

來源

2012-07-10 03:23:07

有一個答案（因爲刪除），說如果你設置不透明度爲1，你可以看到發生了什麼。我這樣做了，Firefox文件輸入字段就像是一個文本框，當你點擊它時，它會打開瀏覽文件對話框。以上內容不會改變任何內容。 – David542 2012-07-10 03:40:46

我不確定你的意思是...在IE9中查看你的JSFiddle，通過刪除提到的行，我看到了與不同遊標完全相同的行爲。我必須在兩種情況下雙擊以激活文件打開對話框。 – 2012-07-10 04:39:12

如果您將不透明度恢復爲1，您可以看到問題所在 - 輸入佔用了整個頁面。如果將高度更改爲0px，則它可以按預期工作。請注意，您的跨度標籤沒有正確關閉（你有</A>而不是</SPAN>）

來源

2012-07-10 03:36:01 Michael

正確它會'工作'，因爲它會顯示正確，但行動將不會觸發。所以它看起來不錯，但功能爲零。 – David542 2012-07-10 03:46:25

我還沒有詳細瞭解你是如何做的，但如果你做了改變並點擊鏈接，附件文件對話框就會顯示出來。 – Michael 2012-07-10 03:48:00

功能確實起作用，因爲跨度和輸入都位於標籤內 - 因此單擊跨度與單擊輸入相同。實際上，它看起來像你可以在顯示器上輸入：none並且仍然具有該功能。這樣你就不需要既不透明又不想將它從頁面上移開。 – Michael 2012-07-10 04:03:13

如何更改iFrame上的光標「選擇文件」

回答

相關問題