如何使用CSS設置上傳輸入的樣式？

爲了保護用戶，您無法真正使用CSS來上傳樣式。因此，解決方案就是隱藏真正的上傳並向用戶顯示一些看起來如何的其他元素。如何使用CSS設置上傳輸入的樣式？

I started a JSFiddle顯示瞭如何通過簡單的按鈕或其他東西掩蓋無形的真實上傳，以便您可以設置按鈕樣式 - 但仍然可以讓用戶單擊上傳輸入。

但是，問題是我不能讓懸停狀態工作，因爲實際輸入浮動在按鈕上方。

我接近這個問題錯了嗎？你如何上傳輸入風格？

來源

2011-12-14 Xeoncross

在玩了一段時間後，我終於通過使input成爲Upload按鈕元素的一個子元素而工作。我不得不將上傳按鈕設爲div，因爲input作爲button的孩子是不正確的。

See it in action here

來源

2011-12-15 18:11:49 Xeoncross

如果我理解這個問題，這是你要實現

jsfiddle.net/yVFWJ/1/

.button { 
    width: 47px; 
    height: 19px; 
    cursor: pointer; 
    text-indent: -9999px; 
    border: none; 
    background-image: url(http://www.hudson-realestate.com/us/images/uploadButton.gif); 
}

來源

2011-12-14 19:51:22 Shepherd

嗯，這確實替換爲自定義圖片的背景 - 但圖像沒有反應。也許我需要[添加懸停狀態]（http://jsfiddle.net/Xeoncross/yVFWJ/5/），使其成爲一個完美的工作示例。然而，[我也試過]（http://jsfiddle.net/Xeoncross/yVFWJ/2/），所以我可以使用CSS和文本，而不是圖像。 – Xeoncross 2011-12-14 20:36:26

唔...你可以使用document.onmousemove事件是什麼。在那裏你可以檢查你的鼠標位置是否在按鈕區域內。如果是，只需將按鈕類改爲例如「send_button_hover」。如果不是，請將該類更改爲「send_button」。

你可以使用純JavaScript來做到這一點。這並不困難。但是，如果您使用jQuery，它更容易lot。對於handeling事件你有mousemove()函數; height()和width()用於計算按鈕暗度; offset functions來計算按鈕的位置和toggleClass()來改變按鈕的類別。

來源

2011-12-14 19:57:28

如何使用CSS設置上傳輸入的樣式？

回答

相關問題