1) I am encountering an issue with displaying CSS in a form preview tab. Despite setting the CSS, it does not reflect on the fields after clicking the preview button.
2) Are there alternative methods to open the tab in a new window rather than opening it directly?
/*form preview*/
function PrintPreview() {
var toPrint = document.getElementById('from_privew');
var popupWin = window.open('', '_blank', 'width=1000,height=1000,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body>')
popupWin.document.write(toPrint.innerHTML);
popupWin.document.write('</div></body></html>');
popupWin.document.close();
}@media print{
input[type="text"],
input[type="email"] {
border: 1px solid #000;
padding: 05px;
border-radius: 05px;
}
input[type="submit"],
a {
background: #0088cc;
border: none;
border-radius: 05px;
padding: 08px 25px;
color: #fff;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="from_privew">
<form>
<input type="text" name="name">
<input type="email" name="email">
<input type="submit" name="submit">
<a href="#" onclick="PrintPreview()">Preview</a>
</form>
</div>