1

I'm currently tuning a file input for displaying its content using a preview <img> tag. 

<div id="image_preview">
    <input> ..... 
    <img id="preview" src="" class="img-fluid" alt="">
</div>

Using some CSS, it renders correctly on Chrome but I got a black stroke on every side of the square on Firefox (and only on Firefox). I tried to set a "border: none;" or even a transparent background but none of these are working as expected. Any hints?

Thanks for any kind of help :)

Correct file input on chrome Problem on Firefox

Scaramouche
  • 3,188
  • 2
  • 20
  • 46
Jerome Desseaux
  • 49
  • 5
  • since the black lines are grey on the bottom, i think we are looking at `box-shadow` or some sort of `underline`, there is more css options for this then just `border`, i'd suggest checking for shadow or underline/line styling – Ramon de Vries Oct 14 '19 at 17:04
  • Maybe check the css "outline"? – Danny Oct 14 '19 at 17:05

2 Answers2

1

Fixed. I found that Firefox is adding these lines only on blank img src. I added a blank image base64 string and it's working fine now.

Thanks for your help :)

If needed : data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7

Jerome Desseaux
  • 49
  • 5
0

Firefox usually adds a dotted line, this can be removed and an SO user answered this question:

How to remove Firefox's dotted outline on BUTTONS as well as links?

Basically writing in your CSS this ::-moz-focus-inner

.img-fluid::-moz-focus-inner {
    border: 0;
}

I hope this solves your problem.

znxr
  • 71
  • 5
  • Didn't know. Thanks :) But it's look like it's not related to my problem as your snippet isn't working. I'm still trying to find a solution. Anyway, thank you, I learnt something :) – Jerome Desseaux Oct 14 '19 at 17:15
  • @JeromeDesseaux you can see solutions in the SO post link that I mentioned. Maybe your 'dotted line' is for the input. – znxr Oct 14 '19 at 17:21
  • No because it renders fine as soon as I remove (or display: none) the img :) – Jerome Desseaux Oct 14 '19 at 17:24