Vue Bootstrap-3单选按钮打印时无法填充的技术问题求助

• 问题根源：浏览器默认打印样式会重置表单控件外观，单选按钮的选中状态样式常被覆盖或隐藏，而BootstrapVue官方文档已内置打印样式修复。

• 修复方案：

  1. 在你的打印SCSS中添加针对性样式，强制显示选中状态：

     @media print {
       // 确保选中的单选按钮背景和边框颜色匹配Bootstrap主题
       .form-check-input:checked {
         background-color: #0d6efd;
         border-color: #0d6efd;
         // 显示选中的圆点伪元素
         &::after {
           display: block;
           width: 0.375em;
           height: 0.375em;
           margin: auto;
           background-color: #fff;
           border-radius: 50%;
         }
       }
     
       // 保证未选中单选按钮的边框在打印时可见
       .form-check-input {
         border: 1px solid #adb5bd;
       }
     }
     

  2. 排查自定义打印样式中是否存在visibility: hidden或display: none这类属性，误隐藏了单选按钮元素。
  3. 提升样式优先级：如果自定义样式被覆盖，可使用更具体的选择器，比如.b-form-radio .form-check-input:checked来确保样式生效。

• 验证方式：用浏览器打印预览（Ctrl+P）实时查看效果，调整样式参数直到选中状态正常显示。

内容的提问来源于stack exchange，提问作者Dain Verd