<form action="">
<label>基本應用</label>
<div id="twzipcode"></div>
<label>進階應用</label>
<div id="twzipcode_ADV"></div>
</form>
@import url(https://fonts.googleapis.com/css?family=Lily+Script+One);
form {
margin:10% auto 0 auto;
padding:30px;
width:400px;
height:auto;
overflow:hidden;
background:white;
border-radius:10px;
}
form label {
font-size:14px;
color:darkgray;
cursor:pointer;
}
form label,
form input,
form select{
float:left;
}
form div{
clear:both;
overflow:hidden;
padding:10px;
margin-bottom:10px;
background:#efefef;
border-radius:5px;
}
form input ,
form select{
margin:15px 0;
padding:15px 10px;
outline:none;
border:1px solid #bbb;
border-radius:5px;
height:40px;
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition:0.2s ease all;
-moz-transition:0.2s ease all;
-ms-transition:0.2s ease all;
-o-transition:0.2s ease all;
transition:0.2s ease all;
}
form input[type=text]:focus,
form input[type="password"]:focus {
border-color:cornflowerblue;
}
input[type=submit] {
padding:15px 50px;
width:auto;
background:#1abc9c;
border:none;
color:white;
cursor:pointer;
display:inline-block;
float:right;
clear:right;
-webkit-transition:0.2s ease all;
-moz-transition:0.2s ease all;
-ms-transition:0.2s ease all;
-o-transition:0.2s ease all;
transition:0.2s ease all;
}
input[type=submit]:hover {
opacity:0.8;
}
input[type="submit"]:active {
opacity:0.4;
}
$("#twzipcode").twzipcode();
$("#twzipcode_ADV").twzipcode({
zipcodeIntoDistrict: true, // 郵遞區號自動顯示在地區
css: ["city form-control", "town form-control"], // 自訂 "城市"、"地區" class 名稱
countyName: "city", // 自訂城市 select 標籤的 name 值
districtName: "town" // 自訂地區 select 標籤的 name 值
});
This Pen doesn't use any external CSS resources.