如何为ACF的select字段不同选项分别设置独立样式

解决步骤 #

1. 修改PHP输出代码

你当前使用的the_field()会直接打印字段值，我们需要先获取字段值，将它作为类名追加到span标签上，才能给不同取值匹配不同样式：

<?php
// 先获取type3字段的取值
$type3_val = get_field('type3');
// 仅当字段有有效值时输出
if ($type3_val) :
?>
<span class="rawsubtype3 <?php echo esc_attr($type3_val); ?>">
    <?php echo esc_html($type3_val); ?>
</span>
<?php endif; ?>

2. 新增对应CSS样式

把下面的样式添加到你的主题样式文件（一般为style.css），或者主题自定义后台的「额外CSS」设置项中即可生效：

/* raw选项样式：黄色背景 */
.rawsubtype3.raw {
    background-color: #ffff00;
    /* 可选样式：增加内边距、圆角让显示更美观 */
    padding: 2px 6px;
    border-radius: 3px;
}
/* sub选项样式：蓝色背景 */
.rawsubtype3.sub {
    background-color: #0000ff;
    color: #ffffff; /* 可选：蓝色背景下搭配白色文字提升可读性 */
    padding: 2px 6px;
    border-radius: 3px;
}

内容的提问来源于stack exchange，提问作者Muhammad Hassan