How to disable hover for input type of file

Question

I have a HTML form and I am using an input of type "file". This gives me a browse button to upload a file. When I chose a file and click on save the browse button should be disabled. I have used jquery to disable the browse button. Now even after it is disabled and I hover over it the color of the button changes. So could anyone let me know how to remove the hover property for this button using jquery? I want to disable the hover property only after the user clicks save. Below is the code HTML code for the browse button.

<input type="file" id="fileUpload" accept="text/csv" 
       title="Browse" ng-disabled="fileInMemory"/>

Doesn't have a hover state for me: http://jsfiddle.net/d63bfv47/ — APAD1, Sep 21 '15 at 19:00
I think there is some style sheet being applied to it which is getting the hover property for it. Could you let me know how I could disable it using jquery. Initially when the page loads I need the hover functionality but after the save button is clicked I want it to be removed. — Valla, Sep 21 '15 at 19:07

score 0 · Answer 1 · answered Sep 21 '15 at 19:06

0

try this way

<style>

  input[type="file"]:hover{

  /* your css value */

 }
</style>

answered Sep 21 '15 at 19:06

ScaisEdge

131,976
10
91
107

I want to remove the hover property of the button using jquery and only when a certain action occurs. – Valla Sep 21 '15 at 19:09

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

Try change ng-disabled to disabled, like

<input type="file" id="fileUpload" accept="text/csv" title="Browse" disabled/>

And you can change 'disable' option using

$("#fileUpload").prop('disabled', true); // Off
$("#fileUpload").prop('disabled', false); // On

You can read the answer to similar question How disable hover

edited May 23 '17 at 12:14

Community

1
1

answered Sep 21 '15 at 19:07

Max

711
5
13

I used $("#fileUpload").attr("disabled", '');. This works fine,the button is disabled but the color changes when I hover over it. – Valla Sep 21 '15 at 19:09
Try use my example for disable and enable input – Max Sep 21 '15 at 19:12

score 0 · Answer 3 · answered Sep 21 '15 at 19:14

You can also use vanilla javascript doesn't give any hover effects whatsoever:

http://jsfiddle.net/xdrLeh5p/

<button id="btn" type="submit" disabled>disable/enable</button>

<button id="btnDisable">disable again</button>

JS

function enable () {
    document.getElementById('btn').removeAttribute('disabled');
}

document.getElementById('btnDisable').onclick = function () {
    document.getElementById('btn').setAttribute('disabled', 'disabled');

}
enable();

score 0 · Answer 4 · edited Jan 02 '23 at 19:05

0

You can remove the hover by adding an inline style like:

<input style={{display: "none"}} onChange={(e) => handleChangeFile(e.target.files[0])} />

this solution is found in reactjs inline css

edited Jan 02 '23 at 19:05

Julia Meshcheryakova

3,162
3
22
42

answered Jan 02 '23 at 07:54

Alex K Antony

31
4

How to disable hover for input type of file

4 Answers4