Check out this customized printable application form that allows users to easily input their information and print it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Custom Printout</title>
<sytle>
p{
font-size: 20px;
}
.complete {
border-bottom: 2px dotted #888;
font-weight: bold;
line-height: 12px;
}
</style>
</head>
<body>
<p>
Name:<span class="complete">Jane Doe</span>
</p>
<p>
Gender:<span class="complete">Female</span>
</p>
<p>
Date of Birth:<span class="complete">05-April-1985</span>
</p>
</body>
</html>
The fillable dotted points look great in the browser, but when printing, they appear as squares and asterisks instead.
https://i.sstatic.net/3D15m.jpg
How do I resolve this CSS issue with the border-bottom style set to dotted? Any suggestions are appreciated. Thanks.