Woocommerce：如何设计选择字段的内部平方？

Question

我正在使用woocommerce网站，并且在选择字段方面存在一些问题。 正如您在图像中看到的那样，当我在CSS和/或类中定义<select>字段时，将不会设计内部正方形。

当我尝试设计选择字段时，我错过了什么？

css：

    .country_select {
    width: 50% !important;
    text-align: left;
    background: f1f1f1;
    border: 1px solid #333;
    padding: 15px;
    font-size: 20px;
    float: left;
    margin-right: 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

HTML代码 （我删除了<option>选项的很大一部分）

<div class="row">
        <div class="col-12">
        <p class="form-row form-row form-row-wide address-field update_totals_on_change form-group validate-required" id="billing_country_field">
<label for="billing_country" class="">Land <abbr class="required" title="krävs">*</abbr></label>
<select name="billing_country" id="billing_country" autocomplete="country" class="country_to_state country_select input-value" ><option value="">Välj land&hellip;</option><option value="AX" >Danmark</option></select><noscript><input type="submit" name="woocommerce_checkout_update_totals" value="Uppdatera land" /></noscript></p>       </div>
        </div>

结果（图片）：

Answer 1

没什么，我认为这是因为你的CSS中有拼写错误。

只需更改

 background: f1f1f1;

到

 background: #f1f1f1;