css点击显示提交框

CSS点击显示提交框是一个非常常见的网页操作。通过设置CSS样式，可以实现点击某个按钮或链接时，在页面上出现一个表单或弹出框。

<code> .submit-form {
  
   
   display: none;
  
   
   position: absolute;
  
   
   top: 50%;
  
   
   left: 50%;
  
   
   transform: translate(-50%, -50%);
  
   
   background-color: white;
  
   
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  
   
   z-index: 999;
  
   
   padding: 20px;
  
}
  
  .show-form:focus + .submit-form {
  
   
   display: block;
  
}
 

上面是一个CSS代码示例。其中，提交表单默认为隐藏状态(display:none;)，位置设置为绝对定位(position: absolute;)，居中对齐(transform: translate(-50%, -50%))，背景色设置为白色(background-color: white;)，并添加了阴影效果(box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3))，并且设置了一个大于其他元素的层级(z-index: 999;)，实现了“弹出框”的效果。

接着，在某个按钮或链接上添加:focus伪类，使之成为焦点。例如：

<code> <button class="show-form">点击显示提交框</button> 

在按钮上加上class为show-form，然后设置对应的CSS样式:

<code> .show-form:focus + .submit-form {
  
   
   display: block;
  
}
 

这里使用了“相邻兄弟选择器”，即当按钮被聚焦并点击时，会找到下一个class为submit-form的元素，将其display属性设置为block，即实现了提交框的显示。

通过上述CSS代码，就可以实现一个简单的点击显示提交框效果。