Skip to content
Advertisement

Add disabled style (css) to input type file button

I am disabling a input file button in JQuery which works

$('#ID').attr('disabled', true)

However, the button still looks enabled and doesn’t show the disabled style (grey)

I have tried changing the CSS

// Example 
$('#ID').css("background-color", 'yellow')

But regardless of what css I put the button never changes style.

What I can do?

the object I am using (HTML)

<input type="file" id="ID" class="" name="files[]" multiple />

Thanks

Advertisement

Answer

Sorry for previous answer.

I suggest you to check this link to know possibility about changing a input file style.

div.fileinputs {
	position: relative;
}

div.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

input.file {
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}
<div class="fileinputs">
	<input type="file" class="file" disabled/>
	<div class="fakefile">
		<input disabled/>
		<img src="http://fptp.uthm.edu.my/mba/images/911c660826c0b.png"  style="width:30px;"/>
	</div>
</div>

instead of true you can use disabled;

$("#ID").attr('disabled','disabled');

or you can use .prop()

$("#ID").prop('disabled', true);
$("#ID").prop('disabled', false);
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement