wpcf7 添加自定义样式国家下拉菜单选项

在之前的文章里介绍了wpcf7的教程，从安装到验证码的使用全文下来基本上可以满足大多数的需求，当需要有选择国家的字段的时候，其实也可以用插件自带的下拉字段，将全部的国家列表添加进去就行，不过默认的下拉select框是比较难看的，如果想自定义的话就需要进行一定的css和Javascript能力了。

首先在后台添加表单的时候，将select字段使用input替换，然后设置为不可输入编辑，再使用自定义的HTML结构包裹全部国家列表，可以按照下面的例子：

<div class="form-msg01 flex">
<label>[text* your-name placeholder "*First Name"]</label>
<label>[text* your-name2 placeholder "*Last Name"]</label>
<label>[email* your-email placeholder "*Email"]</label>
<label>[tel* your-phone placeholder "*Phone Number"]</label>
<label>[tel* your-company placeholder "*Company Name"]</label><label class="is-select">[text* your-country readonly placeholder "*Select Country"]<span class="select-arrow"></span><span class="select-options">
<span data-value="AF">Afghanistan</span>
<span data-value="AX">Åland Islands</span>
<span data-value="AL">Albania</span>
<span data-value="DZ">Algeria</span>
<span data-value="AS">American Samoa</span>
<span data-value="AD">Andorra</span>
<span data-value="AO">Angola</span>
<span data-value="AI">Anguilla</span>
<span data-value="AQ">Antarctica</span>
<span data-value="AG">Antigua and Barbuda</span>
<span data-value="AR">Argentina</span>
<span data-value="AM">Armenia</span>
<span data-value="AW">Aruba</span>
<span data-value="AU">Australia</span>
<span data-value="AT">Austria</span>
<span data-value="AZ">Azerbaijan</span>
<span data-value="BS">Bahamas</span>
<span data-value="BH">Bahrain</span>
<span data-value="BD">Bangladesh</span>
<span data-value="BB">Barbados</span>
<span data-value="BY">Belarus</span>
<span data-value="PW">Belau</span>
<span data-value="BE">Belgium</span>
<span data-value="BZ">Belize</span>
<span data-value="BJ">Benin</span>
<span data-value="BM">Bermuda</span>
<span data-value="BT">Bhutan</span>
<span data-value="BO">Bolivia</span>
<span data-value="BQ">Bonaire, Saint Eustatius and Saba</span>
<span data-value="BA">Bosnia and Herzegovina</span>
<span data-value="BW">Botswana</span>
<span data-value="BV">Bouvet Island</span>
<span data-value="BR">Brazil</span>
<span data-value="IO">British Indian Ocean Territory</span>
<span data-value="BN">Brunei</span>
<span data-value="BG">Bulgaria</span>
<span data-value="BF">Burkina Faso</span>
<span data-value="BI">Burundi</span>
<span data-value="KH">Cambodia</span>
<span data-value="CM">Cameroon</span>
<span data-value="CA">Canada</span>
<span data-value="CV">Cape Verde</span>
<span data-value="KY">Cayman Islands</span>
<span data-value="CF">Central African Republic</span>
<span data-value="TD">Chad</span>
<span data-value="CL">Chile</span>
<span data-value="CN">China</span>
<span data-value="CX">Christmas Island</span>
<span data-value="CC">Cocos (Keeling) Islands</span>
<span data-value="CO">Colombia</span>
<span data-value="KM">Comoros</span>
<span data-value="CG">Congo (Brazzaville)</span>
<span data-value="CD">Congo (Kinshasa)</span>
<span data-value="CK">Cook Islands</span>
<span data-value="CR">Costa Rica</span>
<span data-value="HR">Croatia</span>
<span data-value="CU">Cuba</span>
<span data-value="CW">Cura&ccedil;ao</span>
<span data-value="CY">Cyprus</span>
<span data-value="CZ">Czech Republic</span>
<span data-value="DK">Denmark</span>
<span data-value="DJ">Djibouti</span>
<span data-value="DM">Dominica</span>
<span data-value="DO">Dominican Republic</span>
<span data-value="EC">Ecuador</span>
<span data-value="EG">Egypt</span>
<span data-value="SV">El Salvador</span>
<span data-value="GQ">Equatorial Guinea</span>
<span data-value="ER">Eritrea</span>
<span data-value="EE">Estonia</span>
<span data-value="SZ">Eswatini</span>
<span data-value="ET">Ethiopia</span>
<span data-value="FK">Falkland Islands</span>
<span data-value="FO">Faroe Islands</span>
<span data-value="FJ">Fiji</span>
<span data-value="FI">Finland</span>
<span data-value="FR">France</span>
<span data-value="GF">French Guiana</span>
<span data-value="PF">French Polynesia</span>
<span data-value="TF">French Southern Territories</span>
<span data-value="GA">Gabon</span>
<span data-value="GM">Gambia</span>
<span data-value="GE">Georgia</span>
<span data-value="DE">Germany</span>
<span data-value="GH">Ghana</span>
<span data-value="GI">Gibraltar</span>
<span data-value="GR">Greece</span>
<span data-value="GL">Greenland</span>
<span data-value="GD">Grenada</span>
<span data-value="GP">Guadeloupe</span>
<span data-value="GU">Guam</span>
<span data-value="GT">Guatemala</span>
<span data-value="GG">Guernsey</span>
<span data-value="GN">Guinea</span>
<span data-value="GW">Guinea-Bissau</span>
<span data-value="GY">Guyana</span>
<span data-value="HT">Haiti</span>
<span data-value="HM">Heard Island and McDonald Islands</span>
<span data-value="HN">Honduras</span>
<span data-value="HK">Hong Kong</span>
<span data-value="HU">Hungary</span>
<span data-value="IS">Iceland</span>
<span data-value="IN">India</span>
<span data-value="ID">Indonesia</span>
<span data-value="IR">Iran</span>
<span data-value="IQ">Iraq</span>
<span data-value="IE">Ireland</span>
<span data-value="IM">Isle of Man</span>
<span data-value="IL">Israel</span>
<span data-value="IT">Italy</span>
<span data-value="CI">Ivory Coast</span>
<span data-value="JM">Jamaica</span>
<span data-value="JP">Japan</span>
<span data-value="JE">Jersey</span>
<span data-value="JO">Jordan</span>
<span data-value="KZ">Kazakhstan</span>
<span data-value="KE">Kenya</span>
<span data-value="KI">Kiribati</span>
<span data-value="KW">Kuwait</span>
<span data-value="KG">Kyrgyzstan</span>
<span data-value="LA">Laos</span>
<span data-value="LV">Latvia</span>
<span data-value="LB">Lebanon</span>
<span data-value="LS">Lesotho</span>
<span data-value="LR">Liberia</span>
<span data-value="LY">Libya</span>
<span data-value="LI">Liechtenstein</span>
<span data-value="LT">Lithuania</span>
<span data-value="LU">Luxembourg</span>
<span data-value="MO">Macao</span>
<span data-value="MG">Madagascar</span>
<span data-value="MW">Malawi</span>
<span data-value="MY">Malaysia</span>
<span data-value="MV">Maldives</span>
<span data-value="ML">Mali</span>
<span data-value="MT">Malta</span>
<span data-value="MH">Marshall Islands</span>
<span data-value="MQ">Martinique</span>
<span data-value="MR">Mauritania</span>
<span data-value="MU">Mauritius</span>
<span data-value="YT">Mayotte</span>
<span data-value="MX">Mexico</span>
<span data-value="FM">Micronesia</span>
<span data-value="MD">Moldova</span>
<span data-value="MC">Monaco</span>
<span data-value="MN">Mongolia</span>
<span data-value="ME">Montenegro</span>
<span data-value="MS">Montserrat</span>
<span data-value="MA">Morocco</span>
<span data-value="MZ">Mozambique</span>
<span data-value="MM">Myanmar</span>
<span data-value="NA">Namibia</span>
<span data-value="NR">Nauru</span>
<span data-value="NP">Nepal</span>
<span data-value="NL">Netherlands</span>
<span data-value="NC">New Caledonia</span>
<span data-value="NZ">New Zealand</span>
<span data-value="NI">Nicaragua</span>
<span data-value="NE">Niger</span>
<span data-value="NG">Nigeria</span>
<span data-value="NU">Niue</span>
<span data-value="NF">Norfolk Island</span>
<span data-value="KP">North Korea</span>
<span data-value="MK">North Macedonia</span>
<span data-value="MP">Northern Mariana Islands</span>
<span data-value="NO">Norway</span>
<span data-value="OM">Oman</span>
<span data-value="PK">Pakistan</span>
<span data-value="PS">Palestinian Territory</span>
<span data-value="PA">Panama</span>
<span data-value="PG">Papua New Guinea</span>
<span data-value="PY">Paraguay</span>
<span data-value="PE">Peru</span>
<span data-value="PH">Philippines</span>
<span data-value="PN">Pitcairn</span>
<span data-value="PL">Poland</span>
<span data-value="PT">Portugal</span>
<span data-value="PR">Puerto Rico</span>
<span data-value="QA">Qatar</span>
<span data-value="RE">Reunion</span>
<span data-value="RO">Romania</span>
<span data-value="RU">Russia</span>
<span data-value="RW">Rwanda</span>
<span data-value="BL">Saint Barth&eacute;lemy</span>
<span data-value="SH">Saint Helena</span>
<span data-value="KN">Saint Kitts and Nevis</span>
<span data-value="LC">Saint Lucia</span>
<span data-value="SX">Saint Martin (Dutch part)</span>
<span data-value="MF">Saint Martin (French part)</span>
<span data-value="PM">Saint Pierre and Miquelon</span>
<span data-value="VC">Saint Vincent and the Grenadines</span>
<span data-value="WS">Samoa</span>
<span data-value="SM">San Marino</span>
<span data-value="ST">S&atilde;o Tom&eacute; and Pr&iacute;ncipe</span>
<span data-value="SA">Saudi Arabia</span>
<span data-value="SN">Senegal</span>
<span data-value="RS">Serbia</span>
<span data-value="SC">Seychelles</span>
<span data-value="SL">Sierra Leone</span>
<span data-value="SG">Singapore</span>
<span data-value="SK">Slovakia</span>
<span data-value="SI">Slovenia</span>
<span data-value="SB">Solomon Islands</span>
<span data-value="SO">Somalia</span>
<span data-value="ZA">South Africa</span>
<span data-value="GS">South Georgia/Sandwich Islands</span>
<span data-value="KR">South Korea</span>
<span data-value="SS">South Sudan</span>
<span data-value="ES">Spain</span>
<span data-value="LK">Sri Lanka</span>
<span data-value="SD">Sudan</span>
<span data-value="SR">Suriname</span>
<span data-value="SJ">Svalbard and Jan Mayen</span>
<span data-value="SE">Sweden</span>
<span data-value="CH">Switzerland</span>
<span data-value="SY">Syria</span>
<span data-value="TW">Taiwan</span>
<span data-value="TJ">Tajikistan</span>
<span data-value="TZ">Tanzania</span>
<span data-value="TH">Thailand</span>
<span data-value="TL">Timor-Leste</span>
<span data-value="TG">Togo</span>
<span data-value="TK">Tokelau</span>
<span data-value="TO">Tonga</span>
<span data-value="TT">Trinidad and Tobago</span>
<span data-value="TN">Tunisia</span>
<span data-value="TR">Turkey</span>
<span data-value="TM">Turkmenistan</span>
<span data-value="TC">Turks and Caicos Islands</span>
<span data-value="TV">Tuvalu</span>
<span data-value="UG">Uganda</span>
<span data-value="UA">Ukraine</span>
<span data-value="AE">United Arab Emirates</span>
<span data-value="GB">United Kingdom (UK)</span>
<span data-value="US">United States (US)</span>
<span data-value="UM">United States (US) Minor Outlying Islands</span>
<span data-value="UY">Uruguay</span>
<span data-value="UZ">Uzbekistan</span>
<span data-value="VU">Vanuatu</span>
<span data-value="VA">Vatican</span>
<span data-value="VE">Venezuela</span>
<span data-value="VN">Vietnam</span>
<span data-value="VG">Virgin Islands (British)</span>
<span data-value="VI">Virgin Islands (US)</span>
<span data-value="WF">Wallis and Futuna</span>
<span data-value="EH">Western Sahara</span>
<span data-value="YE">Yemen</span>
<span data-value="ZM">Zambia</span>
<span data-value="ZW">Zimbabwe</span></span></label><label class="full">[tel* your-interests placeholder "*Which product interests you?"]</label></div>
<div class="form-msg02 flex">
<label>[textarea your-subject placeholder "Message"]</label><label class="yzm">[captchar captcha-170 4/4 placeholder "*Verification Code"][captchac captcha-170]</label>
</div>
<div class="sub-button">
[submit id:tjbd "Submit"]
</div>

接下来就是对包裹国家列表的区块进行css美化，将区块固定在国家字段这个下方，选择的时候进行一些样式的变化，交互效果，其他的可以自定义匹配自己的网页效果，这里主要贴出国家字段的css样式

.form-msg01 label.is-select input{
    cursor: auto;
}
 .form-msg01 label .select-arrow{
    position: absolute;
    border-top: 2px solid #666;
    border-left: 2px solid #666;
    width: 6px;
    height: 6px;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%) rotate(225deg);
}
 .form-msg01 label .select-options{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 300px;
    overflow: auto;
    border: 1px solid #f1f1f1;
    padding: 1rem 0;
    background-color: #fff;
    z-index: 1;
    box-sizing: border-box;
    display: none;
}
 .form-msg01 label .select-options span{
    display: block;
    display: block;
    padding: 3px 1rem;
    cursor: pointer;
}
 .form-msg01 label .select-options span:hover{
    background-color: #f1f1f1;
}

最后就是动作，需要JavaScript配合，因为wordpress原生自带jQuery库，所以用jQuery更加方便实现功能：

jQuery(function ($) {
	// 模拟下拉单选，可以自定义美化  需要设定label.is-select 的包裹层

	$('label.is-select .select-options').on('click', 'span', function(){
		let _value = $(this).text();
		$('label.is-select input').val(_value);
	})                    
	$('label.is-select input').on('click', function(){
		$('label.is-select .select-options').toggle();
	})

	$(document).click(function(e){  // 其他区域隐藏效果
		let target = $(e.target);
		if( !target.is('.is-select') && !target.parents().is('.is-select')){
		   $('label.is-select .select-options').hide();
		}
	})
	 $('.is-select').click(function(e){
		e.stopPropagation();
	})
})

这样实现了模拟下拉框单选的效果，如果可以接受select默认的样式其实不需要这么麻烦的，以上的做法就是为了适配各个网页的视觉效果，满足广大的客户的需求，整个下来效果如下：