如何使 WooCommerce Checkout 中的自定义选择框看起来像其他选择框？答案

【问题标题】：How can I make a custom select box in WooCommerce Checkout look like the other select boxes?如何使 WooCommerce Checkout 中的自定义选择框看起来像其他选择框？
【发布时间】：2014-07-20 17:15:04
【问题描述】：

在询问之前我已经对此进行了一些研究，但无法找到我正在寻找的答案。我为计费下的结帐页面创建了一个自定义选择框。它是完整的，因为它可以在页面上工作，提交数据，甚至将数据添加到电子邮件中。但是，它看起来不太好。我希望它看起来像 Country 和 State 下拉框，风格方面。代码如下：

add_filter( 'woocommerce_checkout_fields' , 'custom_store_pickup_field');

function custom_store_pickup_field( $fields ) {
  $fields['billing']['my_field_name'] = array(
    'type'          => 'select',
    'options'       => array(
    'Option 1'      => 'Select if choosing local pickup',
    'Option 2'      => 'Address 1, etc.',
    ),
    'class'         => array('own-css-name'),
    'label'         => __('<br /><p style="font-size:20px;">Please Choose A Pickup Location (if applicable, otherwise skip)'),
    );

return $fields;

}

我在网上看到你可以将其设为自己的 css 名称，所以我尝试了（如上所示），但我不确定这意味着什么？我会使用什么 css 名称来匹配国家和州的风格，因为这些风格是 WooCommerce 附带的，它们不是自定义的？

编辑：我想出了一个解决方案来检查元素、查找类并使用简单自定义 CSS 来覆盖和分配与 Country 和 State 相同的属性。然而，这似乎不是最有说服力的解决方案。我想知道是否有更好的方法。

【问题讨论】：

标签： php wordpress

【解决方案1】：

您需要添加一些自定义 JavaScript 以将 Chosen 样式应用到您的新下拉菜单。默认情况下，WooCommerce 将此应用于具有 select.chosen_select 类的选择框，但是从 looking at the code 无法将 .chosen_select 类应用于实际的选择框，class 属性应用于该字段的父容器，因此应用样式的新 JavaScript。

jQuery('.own-css-name select').chosen();

【讨论】：