如何用纯CSS解决圆角渐变边框容器内复选框等表单元素失效问题

问题根因 #

实现渐变边框时使用的::before伪元素设置了绝对定位，铺满了整个#pagebox容器，且默认层级高于容器内的所有子元素，相当于在表单上方盖了一层透明遮罩，拦截了所有点击、输入交互，所以容器内的表单控件全部失效，容器外的元素不受影响。

解决方案 #

只需要给#pagebox::before新增pointer-events: none属性即可，该属性会让伪元素完全不响应任何交互事件，操作可以直接穿透到下层的表单元素，同时不会影响渐变边框的显示效果。

修改后的#pagebox::before样式如下：

#pagebox::before  {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius: 3rem 1.5rem;
  padding:20px;
  background: linear-gradient(to top left, #FFE5B0, rgba(255, 153, 150, 0), #C2FBFF), linear-gradient(to top right, #05F5BD, rgba(255, 153, 150, 0), #07D1DE) rgba(255, 153, 150, 1);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  /* 新增这一行即可解决问题 */
  pointer-events: none;
}

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