html - Woocommerce:如何设计选择字段的内部正方形？

Question

我在一个 woocommerce 网站上工作，在选择字段方面遇到了一些问题。正如您在图像上看到的那样，当我定义 <select> 时，不会设计内部正方形。 CSS 和/或类中的字段。

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

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;