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

I made a content box with a gradient border using the method described here: https://dev.to/afif/border-with-gradient-and-radius-387f

Unfortunately, forms, checkboxes, and radio buttons no longer work (I cant type in text boxes or check/uncheck boxes and buttons). It seems to have something to do with the use of a pseudo-element like ::before, as commenting out the content property removed the gradient border and restored functionality. Furthermore, content outside the box with the pseudo-element works fine.

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;
}

I put the test code on codepen: https://codepen.io/AwakeAntelope/pen/LYLveQK

CodePudding user response：

When You are creating before with pseudo-element so it is created before meand high order so you need give inner content z-index more so it is working

    #pagebox p {position: relative;}