window.print() function doesn't show the checked value of radio buttons and checkboxes

I tried window.print() function to print the page and this does not print the checked values of radio buttons

function myFunction() {
  window.print();
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="../css/styles.css" media="screen" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>

<form action="#">
  <p><label><input checked name="group1" style="display: block" type="radio"> <span style="color:blue">Red</span></label></p>
  <p><label><input name="group1" type="radio"> <span>Yellow</span></label></p>
  <p><label><input class="with-gap" name="group1" type="radio"> <span>Green</span></label></p>
</form><button class="waves-effect waves-light btn" id='printButton' onclick="myFunction()">&nbsp;Print&nbsp;</button>

On clicking the print button the printed page should have the radio button checked.

Solution

Looks like there is a materialize lib issue.
Active radio button has a very weird print style. You can write own styles, something like this:

@media print {
    input[type="radio"]:checked+span { 
        font-weight: bold; 
    }
}

Or add with-gap class to all radio buttons.

 class="with-gap"

materialize issue: https://github.com/Dogfalo/materialize/issues/6175