日主题RiPro V5正式版9.5之后加入了多语言切换,但是样式有点简约。让AI写了个自定义样式,稍微美化一下。
将代码复制粘贴到主题设置-基础设置-自定义CSS样式代码里边保存就行。
/* Notion 风格多语言切换器 - 纯图标按钮版(仅下拉菜单显示语言) */
#translate.language-selector {
display: inline-flex;
align-items: center;
position: relative;
vertical-align: middle;
line-height: normal;
}
.translateSelectLanguage {
text-align: left;
/* 核心1:压缩按钮宽度至仅容纳图标(可微调:38-42px) */
width: 40px !important;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
color: transparent !important; /* 强制隐藏文字(兜底) */
height: 32px;
/* 核心2:调整内边距,仅保留图标空间(左右各8px,上下0) */
padding: 0 8px !important;
margin: 0;
background-color: transparent;
border: 1px solid rgba(55, 53, 47, 0.16);
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
/* 亮色模式图标(深色)- 保留原有图标,位置居中 */
background-image:
url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2337352f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"),
url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2337352f'%3e%3cpath d='M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.02-.03zm10.95 2.15L19 10.5h-1.81l-4.83 6.72h1.9l.99-1.44h4.49l.98 1.44h1.9l-.8-1.15zM15.74 14.4l1.52-2.19 1.52 2.19h-3.04z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 8px center, left 8px center;
background-size: 12px 12px, 18px 18px;
/* 核心3:隐藏按钮内所有文字(无需伪元素,直接缩进) */
text-indent: -9999px;
position: relative;
/* 确保按钮是方形,适配图标 */
box-sizing: border-box;
}
/* 移除之前的缩写伪元素(关键:彻底隐藏文字) */
.translateSelectLanguage::after {
content: none !important;
}
/* 保留hover交互效果(适配纯图标按钮) */
.translateSelectLanguage:hover {
background-color: rgba(55, 53, 47, 0.08);
border-color: rgba(55, 53, 47, 0.24);
}
/* 保留focus交互效果(适配纯图标按钮) */
.translateSelectLanguage:focus {
background-color: white !important;
border-color: #2eaadc;
box-shadow: 0 0 0 2px rgba(46, 170, 220, 0.2);
}
/* 核心4:恢复下拉菜单选项的正常显示(取消所有文字隐藏) */
.translateSelectLanguage option {
color: #37352f !important;
padding: 8px 12px !important;
background: #fff !important;
text-indent: 0 !important; /* 恢复文字显示 */
font-size: 14px !important;
}
/* ********** 深色模式适配(纯图标按钮)********** */
[data-bs-theme="dark"] .translateSelectLanguage {
color: transparent !important; /* 兜底隐藏文字 */
border-color: rgba(247, 246, 243, 0.2) !important;
background-color: rgba(31, 41, 55, 0.8) !important;
/* 深色模式图标(白色) */
background-image:
url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f6f3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"),
url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f7f6f3'%3e%3cpath d='M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.02-.03zm10.95 2.15L19 10.5h-1.81l-4.83 6.72h1.9l.99-1.44h4.49l.98 1.44h1.9l-.8-1.15zM15.74 14.4l1.52-2.19 1.52 2.19h-3.04z'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .translateSelectLanguage:hover {
background-color: rgba(49, 53, 59, 0.8) !important;
border-color: rgba(247, 246, 243, 0.3) !important;
}
[data-bs-theme="dark"] .translateSelectLanguage:focus {
background-color: #1f2937 !important;
border-color: #2eaadc !important;
box-shadow: 0 0 0 2px rgba(46, 170, 220, 0.3) !important;
}
/* 深色模式下拉菜单选项正常显示 */
[data-bs-theme="dark"] .translateSelectLanguage option {
color: #f7f6f3 !important;
background: #1f2937 !important;
}
/* 兼容body.dark-mode的情况(纯图标按钮) */
body.dark-mode .translateSelectLanguage {
color: transparent !important;
border-color: rgba(247, 246, 243, 0.2) !important;
background-color: rgba(31, 41, 55, 0.8) !important;
background-image:
url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f6f3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"),
url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f7f6f3'%3e%3cpath d='M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.02-.03zm10.95 2.15L19 10.5h-1.81l-4.83 6.72h1.9l.99-1.44h4.49l.98 1.44h1.9l-.8-1.15zM15.74 14.4l1.52-2.19 1.52 2.19h-3.04z'/%3e%3c/svg%3e");
}
body.dark-mode .translateSelectLanguage option {
color: #f7f6f3 !important;
background: #1f2937 !important;
}
© 版权声明
1 本站部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系本站进行删除处理。
2 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
3 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
4 本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法、侵权等任何非法活动,否则后果自负!
2 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
3 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
4 本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法、侵权等任何非法活动,否则后果自负!
THE END

![图片[1]-日主题多语言切换样式美化-一点点](https://ydd.cool/wp-content/uploads/2026/01/riyyl.webp)
![图片[2]-日主题多语言切换样式美化-一点点](https://ydd.cool/wp-content/uploads/2026/01/riyya.webp)
![图片[4]-日主题多语言切换样式美化-一点点](https://ydd.cool/wp-content/uploads/2026/01/riyysj2.webp)
![图片[5]-日主题多语言切换样式美化-一点点](https://ydd.cool/wp-content/uploads/2026/01/riyysjyl.webp)




- 最新
- 最热
只看作者