VPS参考、测评、推荐
分享你关注的VPS主机优惠信息

草根吧VPS_WordPress技巧分享_纯代码将WordPress评论回复邮件通知勾选框样式进行美化处理

草根吧VPS_WordPress技巧分享_纯代码将WordPress评论回复邮件通知勾选框样式进行美化处理

互动交流对非常重要。大多数博客都会评论,很多还添加了“评论”功能,这样评论者就在第一时间

草根吧VPS_WordPress技巧分享_纯代码将WordPress评论回复邮件通知勾选框样式进行美化处理

 

首先,将回复HTML部分的结构调整为如下形式。主要是使用mail-notify类添加外部框,使用“notify”类添加输入

    

然后将以下样式添加到样式

/** 评论回复邮件通知 **/  .mail-notify {  padding-left: 10px;  font-size: 14px;  vertical-align: middle;  }  .mail-notify span {  position: absolute;  top: -6px;  left: 0;  width: 230px;  color: #999;  padding-left: 38px;  padding-left: 5px9;  }  .notify {  display: none;  display: inline9;  }  .notify + label {  position: relative;  background: #a5a5a5;  width: 30px;  width: 09;  height: 15px;  : pointer;  display: inline-block;  border-radius: 15px;  }  .notify + label:before {  content: '';  position: absolute;  background: #fff;  top: 0;  left: -1px;  width: 15px;  width: 09;  height: 15px;  z-index: 99999;  border: 1px solid #ddd;  border-radius: 15px;  border: none9;  }  .notify + label:after {  content: '';  position: absolute;  top: 0;  left: 0;  color: #fff;  font-size: 9px;  font-size: 0.9rem;  }  .notify:checked + label {  background: #32a5e7;  border-radius: 15px;  }  .notify:checked + label:after {  content: '';  left: 6px;  }  .notify:checked + label:before {  content: '';  position: absolute;  z-index: 99999;  left: 15px;  border-radius: 15px;  }  .notify + label:after {  left: 15px;  line-height: 21px;  }  .notify + label:after, .notify + label:before {  -webkit-transition: all 0.1s ease-in;  transition: all 0.1s ease-in;  }

完成之后即可实现下方样式

草根吧VPS_WordPress技巧分享_纯代码将WordPress评论回复邮件通知勾选框样式进行美化处理

:草根吧VPS_WordPress技巧分享_纯评论回复邮件通知勾选框样式进行美化处理,://.caogenba..com/1208.html

赞(0) 打赏
未经允许不得转载:草根吧VPS_最新VPS信息参考 » 草根吧VPS_WordPress技巧分享_纯代码将WordPress评论回复邮件通知勾选框样式进行美化处理
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址