NPDS
Responsive

dans https://labo.infocapagde.com/modules.php?ModPath=npds_galerie&ModStart=gal&op=formimgs

j'ai fini par implémenté les input file customisé de BS
(pour info les input de type file sont les plus dur à customiser du fait de leur complexité (sécurité, info native du navigateur etc) .... et donc pour arriver à ça il faut la css complexe de BS + plus une petite touche de js car tout ne peut pas être implémenté par les css ...

merci de tester sur tous les navigateurs (sur le labo et sous le theme npds_boost)
dites moi ce que vous en pensez car je vais probablement les généraliser à l'ensemble du portail si ça ne présente pas de problème


Note sur le process :

le form doit avoir un attribut lang

lang="'.language_iso(1,'','').'"

l'input utilise la class spécifique bs

class="custom-file-input"

traduction des occurances dans la css

.custom-file-input:lang(fr) ~ .custom-file-label::after {

    content: "Choisir ..."

}

.custom-file-input:lang(es) ~ .custom-file-label::after {

    content: "Elegir ..."

}

.custom-file-input:lang(de) ~ .custom-file-label::after {

    content: "Wählen ..."

}

.custom-file-input:lang(en) ~ .custom-file-label::after {

    content: "Browse ..."

}

.custom-file-input:lang(zh) ~ .custom-file-label::after {

    content: "选择 ..."

}

et ce bout de js
qui sert a réinitialisé l'input

   <script type="text/!javascript!">

      //<![CDATA[

         $(".custom-file-input").on("change",function(){

            $(this).next(".custom-file-label").addClass("selected").html($(this).val().split(\'\\\\\').pop());

         });

         window.reset2 = function (e,f) {

            e.wrap("<form>").closest("form").get(0).reset();

            e.unwrap();

            event.preventDefault();

            $("#lab"+f).html("'.gal_translate("Sélectionner votre image").'")

         };

      //]]>

   &lt;/script>