0

I am facing a strange problem only in chrome. I am trying to set the file input color on onClick event of a 'Save' button if there is some validation errors for file input. I tried jquery and simple javascript to set the color but none of them worked for me. This is a problem only in chrome because I tried in mozilla firefox and seems to work correctly.

I am using WebForms and I have a list of file inputs generated from c# code. The code in javascript is as below:

$("input[id^='DC_LVP5EMulti_FU5M_']").each(function (i) { 
    var index = $(this).attr("index");                              
   //$("#DC_LVP5EMulti_FU5M_" + index).css('color', 'black');
   document.getElementById("DC_LVP5EMulti_FU5M_" + index).style.color = "#000000";
});

Something I noticed while debugging in chrome, I set a file input color to red in console using document.getElementById("DC_LVP5EMulti_FU5M_2").style.color = "red"; statement and it worked but it did not have a file uploaded so the text was 'No file choosen' and after I updated all file inputs text color to black again the only one that did not change was the one that has not the text 'No file choosen' but the name of the file uploaded, so I guess the problem is when an input file contains a file and the text has been changed from 'No file choosen' to file name.

Does anybody faced this strange problem before ?

enter image description here

Rey
  • 3,663
  • 3
  • 32
  • 55
  • I'm not sure that this question is a duplicate of those indicated. He's asking why a behavior is happening in Chrome. The 'duplicates' indicated will likely solve the underlying issue, but don't actually ask (or answer) the same question. – adam0101 Mar 06 '17 at 14:38
  • @Rory McCrossan I do not think this is a duplicate because rather than providing me how to change the current code it would be better if you have any other idea how to solve the current problem without having to change many things. Furthermore here I am not talking about how to customize the input file type but I am talking about a specific problem which happens only in `chrome`. You could give me those links as a starting point but not as duplicate questions. If you have a specific reason why you think this is duplicate show it in the answer please. – Rey Mar 06 '17 at 15:38

1 Answers1

1

There are going to be limitations as to what you can do with a file upload control just because of security concerns. I don't know all the intricacies involved, but I do know that it's much easier to just style your control and hide the native control. Check out this example from another Stack Overflow question: Cross-browser custom styling for file upload button

You should be able to change the text and color to whatever you want then since you're just using plain old labels and divs/spans.

Community
  • 1
  • 1
adam0101
  • 29,096
  • 21
  • 96
  • 174
  • Thanks for the answer but I cant change that because there is a lot of code to be changed and there is a lot of logic in javascript etc which needs to be adapted to this version provided in link. The thing which confuse me is why would be a security concern to change the text color in `chrome` and if `chrome` sees it as a security concern why does not `mozilla` behave in the same way ? – Rey Mar 06 '17 at 15:34