WordPress评论回复邮件通知勾选框美化

网站APP 5 年前 6条评论

, , ,

先看看效果图:

WordPress评论回复邮件通知勾选框美化
WordPress评论回复邮件通知勾选框美化

首先将邮件回复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

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

6条评论

  1. #1
    check

    check

    3 年前 Google Chrome 91 Mac OS X 10.15 -@

    HTML在哪里加啊?

    来自台湾
    • 皇家元林

      皇家元林

      3 年前 Firefox 92 Windows 10 -@

      @check 这个在你需要的位置添加就行,一般都在comments.php文件里,找到提交按钮的位置就差不多了

      来自安徽
  2. #2
    万有引力

    万有引力

    3 月前 Google Chrome 124 Windows 10 -@

    大刘就是皇家园林吧。

    来自山东
    • 皇家元林

      皇家元林

      3 月前 Safari 18 Mac OS X 10.15 -@

      @万有引力 没错,这也是我的站,不怎么维护。
      奇怪,怎么评论回复提醒失效了,我才看到你的评论。

      来自安徽
  3. #3
    acevs

    acevs

    3 月前 Google Chrome 124 Windows 10 -@

    没事没事.我感觉挺有惊喜的,
    说不定什么时候冷不丁冒出了一个留言.

    来自山东

发表评论

欢迎回来 (打开)

(必填)