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

by Posted on

互动交流对博客来说非常重要，绝大多数 WordPress 博客都开启了评论，还有很多增加了“通知”的功能，这样能第一时间让评论者收到回复通知，但是那个“有人回复时邮件通知我”的默认勾选框不是太美观（具体见下图），所以今天就参考的样式对其进行美化。

1、将邮件回复 html 部分进行结构调整至如下形式，主要就是外层盒子加上 mail-notify 类，而 input 标签加上“notify”类。

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

2、在样式表中添加如下样式：

  1. /** 评论回复邮件通知 **/
  2. .mail-notify {
  3. padding-left: 10px;
  4. font-size: 14px;
  5. vertical-align: middle;
  6. }
  7. .mail-notify span {
  8. position: absolute;
  9. top: -6px;
  10. left: 0;
  11. width: 230px;
  12. color: #999;
  13. padding-left: 38px;
  14. padding-left: 5px9;
  15. }
  16. .notify {
  17. display: none;
  18. display: inline9;
  19. }
  20. .notify + label {
  21. position: relative;
  22. background: #a5a5a5;
  23. width: 30px;
  24. width: 09;
  25. height: 15px;
  26. cursor: pointer;
  27. display: inline-block;
  28. border-radius: 15px;
  29. }
  30. .notify + label:before {
  31. content: ”;
  32. position: absolute;
  33. background: #fff;
  34. top: 0;
  35. left: -1px;
  36. width: 15px;
  37. width: 09;
  38. height: 15px;
  39. z-index: 99999;
  40. border: 1px solid #ddd;
  41. border-radius: 15px;
  42. border: none9;
  43. }
  44. .notify + label:after {
  45. content: ”;
  46. position: absolute;
  47. top: 0;
  48. left: 0;
  49. color: #fff;
  50. font-size: 9px;
  51. font-size: 0.9rem;
  52. }
  53. .notify:checked + label {
  54. background: #32a5e7;
  55. border-radius: 15px;
  56. }
  57. .notify:checked + label:after {
  58. content: ”;
  59. left: 6px;
  60. }
  61. .notify:checked + label:before {
  62. content: ”;
  63. position: absolute;
  64. z-index: 99999;
  65. left: 15px;
  66. border-radius: 15px;
  67. }
  68. .notify + label:after {
  69. left: 15px;
  70. line-height: 21px;
  71. }
  72. .notify + label:after, .notify + label:before {
  73. -webkit-transition: all 0.1s ease-in;
  74. transition: all 0.1s ease-in;
  75. }
有代码基础的博主也可以根据自己的主题对上述样式进行颜色、尺寸上的调整以达到最佳效果。

3、添加完相应代码刷新相关缓存后刷新页面，“有人回复时邮件通知我”的勾选框已经美化完毕，具体效果见下图：

Published by cloud