先看看效果图:
首先将邮件回复html部分进行结构调整至如下形式,主要就是外层盒子加上mail-notify类,而input标签加上“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: -3px; 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: rgba(178,34,34,1); 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; }
我改下了颜色,可以看本站底下的效果,其他自己发挥把!
本文摘自https://www.yaxi.net/2018-04-27/1777.html
声明:本文采用 BY-NC-SA 协议进行授权,如无注明均为原创,转载请注明转自 你好!刘
本文地址:WordPress评论回复邮件通知勾选框美化
本文地址:WordPress评论回复邮件通知勾选框美化
check
3 年前 Google Chrome 91 Mac OS X 10.15HTML在哪里加啊?
皇家元林
3 年前 Firefox 92 Windows 10@check 这个在你需要的位置添加就行,一般都在comments.php文件里,找到提交按钮的位置就差不多了
万有引力
3 月前 Google Chrome 124 Windows 10大刘就是皇家园林吧。
皇家元林
3 月前 Safari 18 Mac OS X 10.15@万有引力 没错,这也是我的站,不怎么维护。
奇怪,怎么评论回复提醒失效了,我才看到你的评论。
acevs
3 月前 Google Chrome 124 Windows 10没事没事.我感觉挺有惊喜的,
说不定什么时候冷不丁冒出了一个留言.
皇家元林
3 月前 Safari 18 Mac OS X 10.15@acevs 哈哈,是的。你的留言就挺让我惊喜的!