• 最近一段好忙, 忙的都没时间去管理网站,网站被举报 被攻击 我也是醉了 :sad:

  • 好久没发说说了,感觉与世隔绝了 :lol:

  • 今天更换Git主题,以后本站由Git主题强力驱动 :mrgreen: :mrgreen:
  • 六一儿童节快乐

  • 今天全站启用又拍云 CDN进行加速

  • 这两天有些忙所以没来得及更新,愿一切安好
  • 锲而不舍是取得成功关键的一环
  • 当你无助时,你可以哭,但哭过你必须要振作起来,绝地逢生并不罕见,何况不是绝境! 早安!

  • 今天五一,没有出去玩,主要是人太多了

  • 今天外面风好大,天气也有点冷,出门一定要多穿衣服!

WordPress邮箱通知勾选框美化

wp优化 慕白 4个月前 (06-09) 296次浏览 已收录 0个评论
文章目录[隐藏]

WordPress邮箱通知勾选框美化

原始邮箱通知勾选框

这是原始状态的看着特别不美观,这就需要我们去修改了



修改后邮箱通知勾选框

修改后是不是看着很美观

修改代码

首先将邮件回复html部分进行结构调整至如下形式,主要就是外层盒子加上mail-notify类,而input标签加上“notify”类。
<span class="mail-notify">
<input id="comment_mail_notify" class="notify" checked="checked" name="comment_mail_notify" type="checkbox" value="comment_mail_notify" />
<label for="comment_mail_notify">有人回复时邮件通知我</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;
}

 


清宁时光 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WordPress邮箱通知勾选框美化
喜欢 (1)
[6447834@qq.com]
分享 (0)
慕白
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址