<!--
  ** Style a Select Box Using Only CSS
  ** Source: http://bavotasan.com/2011/style-select-box-using-only-css/
  ** Source: http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/
  ** Source: http://stackoverflow.com/a/5809186
-->
<hr>
<h1>Caculate Freight </h1>
<div class="styled-select black semi-square">
  <select>
    <option>選擇縣市:</option>
    <option>基隆市</option>
    <option>台北縣</option>
    <option>台北市</option>
    <option>桃園縣</option>
    <option>新竹縣</option>
    <option>新竹市</option>
    <option>苗栗縣</option>
    <option>台中縣</option>
    <option>台中市</option>
    <option>彰化縣</option>
    <option>南投縣</option>
    <option>雲林縣</option>
    <option>嘉義縣</option>
    <option>台南縣</option>
    <option>台南市</option>
    <option>高雄縣</option>
    <option>高雄市</option>
    <option>屏東縣</option>
    <option>台東縣</option>
    <option>花蓮縣</option>
    <option>宜蘭縣</option>
    <option>離島</option>
  </select>
</div>

<div class="styled-select green semi-square">
  <select>
    <option>鄉鎮</option>
    <option>The second option</option>
    <option>The third option</option>
  </select>
</div>

<div class="styled-select blue semi-square">
  <select>
    <option>甚麼村</option>
    <option>The second option</option>
    <option>The third option</option>
  </select>
</div>
<div class="styled-select yellow semi-square">
  <select>
    <option>甚麼路</option>
    <option>The second option</option>
    <option>The third option</option>
  </select>
</div>
 <form>
    <label for='lane'>lane :</label>
    <br>
    <input type='text' name='lane' id='lane'placeholder='Enter lane'>
    <span id='nameError'></span>
    <br> <br>
    <label for='alley'>alley:</label>
    <br>
    <input type='text' name='alley' id='alley' placeholder='Enter alley'>
    <span id='emailError'></span>
    <br><br>
   <label for='number'>number:</label>
    <br>
    <input type='text' name='number' id='number'placeholder='Enter number'>
    <span id='nameError'></span>
    <br> <br>
    <label for='floor'>floor:</label>
    <br>
    <input type='text' name='floor' id='floor' placeholder='Enter floor'>
    <span id='emailError'></span>
    <br><br>
   <label for='room'>room:</label>
    <br>
    <input type='text' name='room' id='room'placeholder='Enter room'>
    <span id='nameError'></span>
    <br><br> 

/* -------------------- Page Styles (not required) */
div { margin: 20px; }

/* -------------------- Select Box Styles: bavotasan.com Method (with special adaptations by ericrasch.com) */
/* -------------------- Source: http://bavotasan.com/2011/style-select-box-using-only-css/ */
.styled-select {
   background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 100% 0;
   height: 29px;
   overflow: hidden;
   width: 240px;
}

.styled-select select {
   background: transparent;
   border: none;
   font-size: 14px;
   height: 29px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 268px;
}



/* -------------------- Rounded Corners */
.rounded {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
}

.semi-square {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

/* -------------------- Colors: Background */
.green   { background-color: #779126; }
.blue    { background-color: #3b8ec2; }
.yellow  { background-color: #eec111; }
.black   { background-color: #BB5500; }

/* -------------------- Colors: Text */
.green select   { color: #000; }
.blue select    { color: #000; }
.yellow select  { color: #000; }
.black select   { color: #000; }


/* -------------------- Select Box Styles: danielneumann.com Method */
/* -------------------- Source: http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/ */
#mainselection select {
   border: 0;
   color: #EEE;
   background: transparent;
   font-size: 20px;
   font-weight: bold;
   padding: 2px 10px;
   width: 378px;
   *width: 350px;
   *background: #58B14C;
   -webkit-appearance: none; 
}

#mainselection { 
   overflow:hidden;
   width:350px;
   -moz-border-radius: 9px 9px 9px 9px;
   -webkit-border-radius: 9px 9px 9px 9px;
   border-radius: 9px 9px 9px 9px;
   box-shadow: 1px 1px 11px #330033;
   background: #58B14C url("http://i62.tinypic.com/15xvbd5.png") no-repeat scroll 319px center;
}


/* -------------------- Select Box Styles: stackoverflow.com Method */
/* -------------------- Source: http://stackoverflow.com/a/5809186 */
select#soflow, select#soflow-color { 
   -webkit-appearance: button;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #AAA;
   color: #555;
   font-size: inherit;
   margin: 20px;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 300px;
}

select#soflow-color { 
   color: #fff;
   background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#779126, #779126 40%, #779126);
   background-color: #779126;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   padding-left: 15px;
}
span{
  display:none;
}

/*et city = document.getElementById('styled-select black semi-square');
let cuntry = document.getElementById('styled-select green semi-square');
fnction init(){
  if(city.value === '2'){
   btn.addEventListener('click',checkFormValid,ture);
  }
}
function checkFormValid(){
  alert('Your contact information is saved');
}