Woocommerce：選択フィールドの内側の四角形を設計する方法は？

Question

私はwoocommerceサイトで作業しており、select-fieldにいくつかの問題があります。 イメージでわかるように、CSSおよび/またはクラスに<select>フィールドを定義すると、内側の四角形はデザインされません。

Select-Fieldを設計しようとしたら、何が欠けていますか？

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; 

を変更