如何为Gravity Forms中的总计价格字段设置样式？

我帮你梳理下怎么精准找到Gravity Forms总计价格字段的CSS类，以及设置样式的实用方法：

第一步：用浏览器开发者工具定位准确的类 #

这是最靠谱的方式，不会出错：

• 打开你的表单页面，右键点击总计价格字段（不管是标签还是数值部分），选择「检查」（不同浏览器表述略有不同，比如Chrome是「检查」，Firefox是「检查元素」）
• 在弹出的Elements面板里，你就能看到总计字段对应的HTML结构，Gravity Forms针对总计字段有几个常用的专属类：
  • gfield_total：包裹整个总计字段的容器类，包含标签和数值
  • ginput_total：如果你的总计是输入框形式，这个类对应数值输入框；如果是纯文本展示，也可能用这个类
  • gfield_label：总计字段的标签类，比如“总计：”这部分
  • 部分版本里还会用到gravityforms-total作为数值的类

第二步：编写CSS样式示例 #

根据上面找到的类，你可以针对性设置样式，比如：

/* 调整总计标签的样式：加粗、深色字体 */
.gfield_total .gfield_label {
    color: #2d3748;
    font-size: 1.1rem;
    font-weight: 600;
}

/* 调整总计数值的样式：红色大字体、加粗 */
.gfield_total .ginput_total {
    color: #e53e3e;
    font-size: 1.4rem;
    font-weight: 700;
    margin-left: 8px;
}

特殊情况：确认页面的总计样式 #

如果是表单提交后的确认页面里的总计，类名会不一样，通常是：

/* 确认页面的总计标签 */
.gf_summary_total .gf_summary_label {
    font-weight: 600;
}

/* 确认页面的总计数值 */
.gf_summary_total .gf_summary_value {
    color: #38a169;
    font-size: 1.2rem;
}

解决样式不生效的问题 #

如果写了CSS但没效果，大概率是被主题或其他插件的样式覆盖了，这时候可以用更具体的选择器，比如加上你的表单ID（表单ID可以在Gravity Forms后台的表单列表里看到）：

/* 表单ID为5的总计数值样式 */
#gform_wrapper_5 .gfield_total .ginput_total {
    color: #e53e3e;
    font-size: 1.4rem;
}

内容的提问来源于stack exchange，提问作者Ali Leghari