VPS参考测评推荐
专注分享VPS主机优惠信息

主机参考_WordPress技巧分享_纯代码将WordPress评论回复邮件通知勾选框样式进行美化处理

etkvm
QQ交流群:68908809 TG交流群:t.me/zhujicankao TG频道:t.me/zhujicankaoinfo
主机参考:VPS主机测评推荐网,专注分享VPS主机优惠信息!如果您想在本站投放您的广告,点此直达!如果您不想付费,您也可以免费投稿您的产品信息,点此直达联系我们
部分文章发布时间较久远,可能存在未知因素,购买时建议在本博客搜索商家名称,可查看相关文章充分了解商家!若非中文页面可使用谷歌浏览器同步翻译!不诚信商家&黑名单

互动交流对博客非常重要。大多数WordPress博客都会打开评论,很多博客还添加了“评论回复邮件通知”功能,这样评论者就可以在第一时间收到回复通知。

主机参考_WordPress技巧分享_纯代码将WordPress评论回复邮件通知勾选框样式进行美化处理-主机参考

 

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

<span class="mail-notify">
<input type="checkbox" name="comment_mail_notify" id="comment_mail_notify" value="comment_mail_notify" checked="checked" class="notify" />
<label for="comment_mail_notify"><span>有人回复时邮件通知我</span></label>
</span>

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

/** 评论回复邮件通知 **/
.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: 5px\9;
}
.notify {
display: none;
display: inline\9;
}
.notify + label {
position: relative;
background: #a5a5a5;
width: 30px;
width: 0\9;
height: 15px;
cursor: pointer;
display: inline-block;
border-radius: 15px;
}
.notify + label:before {
content: '';
position: absolute;
background: #fff;
top: 0;
left: -1px;
width: 15px;
width: 0\9;
height: 15px;
z-index: 99999;
border: 1px solid #ddd;
border-radius: 15px;
border: none\9;
}
.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;
}

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

主机参考_WordPress技巧分享_纯代码将WordPress评论回复邮件通知勾选框样式进行美化处理-主机参考

vpsor
打赏
转载请注明原文链接:主机参考 » 主机参考_WordPress技巧分享_纯代码将WordPress评论回复邮件通知勾选框样式进行美化处理
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!


评论 2

  1. #2

    非常精彩的文章,引人入胜,痛快淋漓。感谢楼主分享。

    61o 6个月前 (05-12)回复
  2. #1

    主机参考_WordPress技巧分享_纯代码将WordPress评论回复邮件通知勾选框样式进行美化处理

    主机参考 7个月前 (04-22)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏