Hello, I have a problem to print my character sheet. I want to print it with 3 colour bar which represent the honor, the health and the god affinity. I have made this in my code to print the bar and don't print the cursor (made with checkbox), but it doesn't work. /* Health bar */ .jauge-sante { height : 20px ; width : 372px ; margin-left : 18px ; background : linear-gradient ( 90deg , rgba ( 1 , 255 , 0 , 1 ) 0% , rgba ( 255 , 128 , 0 , 1 ) 50% , rgba ( 255 , 0 , 0 , 1 ) 100% ); print-color-adjust: exact ; } input [ type = "checkbox" ] .sante-check { opacity : 0 ; width : 14px ; height : 14px ; position : relative ; top : 5px ; left : 6px ; margin : 1px ; cursor : pointer ; z-index : 1 ; } input [ type = "checkbox" ] .sante-check + span::before { content : "" ; width : 14px ; height : 14px ; font-size : 14px ; -moz-border-radius : 3px ; -webkit-border-radius : 3px ; border-radius : 3px ; } input [ type = "checkbox" ] .sante-check:checked + span::before { content : "▼" ; } @media print { @page { size : A4 portrait ; margin : 10mm ;} body , html { background : white !important ; color : black !important ; } .areas { display : block !important ; page-break-inside : avoid ; } .page-break { page-break-before : always ; break-before : page ; } /* resize logo */ div.logo { width : 75px !important ;} /* hide elements */ button , .sheet-tab , .part-of-sheet-buttons , .export-pdf-btn { display : none !important ; } input.affDiv-check , input.honneur-check , input.sante-check { display : none !important ; } } And the result and the original sheet : How can I correct this ? Thanks
