资源：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Notification of Treatment Stimulant Medicines</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" /> <link rel="stylesheet" type="text/css" href="printstyles.css" media="print" />
</head>
<body>
<div class="container">
<form class="form" action="">
<div class="form__border-title margin-b">
<strong> 1. Lorem ipsum.</strong>
</div>
<div class="form__wrap margin-b display-f">
<div class="form__checkbox">
<p class="check">
<span class="line line-1"></span>
<span class="line line-2"></span>
</p>
<p>New</p>
</div>
<div class="form__checkbox">
<p class="check">
<span class="line line-1"></span>
<span class="line line-2"></span>
</p>
<p>Lorem ipsum dolor sit.</p>
</div>
<div class="form__checkbox">
<p class="check">
<span class="line line-1"></span>
<span class="line line-2"></span>
</p>
<p>Lorem ipsum dolor sit.</p>
</div>
</div>
<div class="form__wrap margin-b">
<div class="form__input">
<strong class="text">Reason for terminations:</strong>
<input type="text" value="" >
</div>
</div>
<div class="form__border-title margin-b">
<strong> 2. Lorem ipsum.</strong>
</div>
<div class="form__wrap display-f margin-b">
<div class="form__input form__input_firstname">
<strong class="text">First name:</strong>
<input type="text" value="" >
</div>
<div class="form__input form__input_surname">
<strong class="text">Surname:</strong>
<input type="text" value="" >
</div>
<div class="form__input form__input_dob">
<strong class="text">DOB:</strong>
<input type="text" value="" >
</div>
</div>
<div class="form__wrap display-f margin-b form__wrap_overflow">
<div class="form__input form__input_address">
<strong class="text">Address:</strong>
<input type="text" value="" >
</div>
<div class="form__input form__input_suburb">
<strong class="text">Suburb:</strong>
<input type="text" value="" >
</div>
<div class="form__input form__input_postcode">
<strong class="text">Postcode:</strong>
<input type="text" value="" >
</div>
</div>
<div class="form__wrap margin-b display-f ">
<div class="form__input form__input_aliases">
<strong class="text">Aliases:</strong>
<input type="text" value="" >
</div>
<div class="form__input form__input_gender">
<strong class="text text_gender">Gender:</strong>
<div class="form__checkbox form__checkbox_gender">
<p class="check">
<span class="line line-1"></span>
<span class="line line-2"></span>
</p>
<p>Male</p>
</div>
<div class="form__checkbox form__checkbox_gender">
<p class="check">
<span class="line line-1"></span>
<span class="line line-2"></span>
</p>
<p>Female</p>
</div>
<div class="form__checkbox form__checkbox_gender">
<p class="check">
<span class="line line-1"></span>
<span class="line line-2"></span>
</p>
<p>Unspecified</p>
</div>
</div>
</div>
</form>
</div>
</body>
<script>
let check = document.querySelectorAll('.form__checkbox .check');
for (let i = 0; check.length > i; i++){
check[i].addEventListener('click', function () {
check[i].classList.toggle('active');
})
}
</script>
</html>
您可能会注意到复选框的背景也未显示。
在 HTML 中 - 所有规则！
概括：
页面本身看起来是正确的，但是当我尝试打印输出并转换为 PDF 文件（Ctrl + P）时，它看不到选中的复选框，并且复选框的背景丢失了
问题： 如何修复这个错误？
我尝试通过chrome浏览器保存，这样复选框才会显示，需要在后台图形设置中勾选。