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

2018-4-27 15:56 来自本站原创 1,144 27 2
[摘要]

大多数WordPress博客都开启了评论,增加了“评论回复邮件通知”的功能,但是默认勾选框不是太美观,今天就对其进行美化。

互动交流对博客来说非常重要,绝大多数WordPress博客都开启了评论,还有很多增加了“评论回复邮件通知”的功能,这样能第一时间让评论者收到回复通知。

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: -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评论回复邮件通知勾选框美化

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:27   其中:访客  14   博主  13
    加载中...
    1. J2 1
      2周前 (05-12) 14楼

      博主用的是什么代码高亮啊?

    2. 3周前 (05-01) 13楼

      五一快乐,好久没逛了,混个脸熟

    3. 4周前 (04-29) 12楼

      技术人就是好,什么都想得出

    4. 4周前 (04-28) 11楼

      挺唯美的,顶一个,爱评论的少了,都是看脸时代,刷抖音美女

      • 飞鸟
        4周前 (04-29)  地下1层

        @米粒博客: 现在的网友的只看不说,所以论坛才会没落,所以博客的博主更要耐得住寂寞

    1 2
    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    27 2 1,144
    13
    Top