我怎样才能在带有纯 CSS 的圆角渐变边框内有一个工作复选框？

Question

我使用此处描述的方法制作了一个带有渐变边框的内容框：https://dev.to/afif/border-with-gradient-and-radius-387f

不幸的是，表单、复选框和单选按钮不再有效（我无法在文本框或 check/uncheck 框和按钮中键入内容）。它似乎与使用像 ::before 这样的伪元素有关，因为注释掉 content 属性删除了渐变边框并恢复了功能。此外，带有伪元素的框外的内容也可以正常工作。

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <link rel= "stylesheet" type= "text/css" href="test.css">
    </head> 

<body>
    
    <div id="pagebox">
        <center><h1>This is a test heading</h1></center>
        <hr>
        <p>  <input type="checkbox" id="remember-me">
        <p> <input type="email" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">Form Text - To give hints and things</small>
        <label for="remember-me" class="block">Remember Me</label></p>
        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
    <p>  <input type="checkbox" id="remember-me">
    <p> <input type="email" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">Form Text - To give hints and things</small>
    <label for="remember-me" class="block">Remember Me</label></p>
</body>

CSS:

 #pagebox {
    color: #012c15;
    margin: 2rem;
    padding-right: 8rem;
    padding-left: 8rem;
    padding-top: 4rem;
    position:relative;
    border-radius: 3rem 1.5rem;
    min-width: 400px;
    width: 80%;
    height: 100%;
    background: #cedce7; /* Old browsers */
    background: -moz-linear-gradient(top,  #FFE5B0 0%,  #C2FBFF 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #FFE5B0 0%, #C2FBFF 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #FFE5B0 0%, #C2FBFF 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbe5f9', endColorstr='#fbfbf2',GradientType=0 );  

}

#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);
    //background:linear-gradient(180deg,#C2FBFF,#FFE5B0); 
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out; 
    mask-composite: exclude; 
}



input::placeholder {
  color: gray;
}

input {
  background: #ecf0f3;
  padding: .5rem;
  height: 1.5rem;
  font-size: 1rem;
  border-radius: 2.5rem;
  box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
}

我把测试代码放在codepen上了：https://codepen.io/AwakeAntelope/pen/LYLveQK

Answer 1

当您使用伪元素创建 before 时，它是在高阶之前创建的，因此您需要提供更多的内部内容 z-index 才能正常工作

    #pagebox p {position: relative;}

我怎样才能在带有纯 CSS 的圆角渐变边框内有一个工作复选框？

How can I have a working checkbox inside a gradient border with rounded corners with pure CSS?

html

css

forms

checkbox

pseudo-element