Search tab updated

src/components/property/propertySearchFields.vue

 <template>
   <div>
-    <div class="col-md-6 mb-2">
+    <div class="container text-left">
       <div class="form-group">
         <label for="city">For:</label>
-        <select
-          class="form-control form-control-lg form-control-a"
-          id="forSelector"
-          v-model="selectedType"
-          @change="TypeSelected"
-        >
-          <option value="Sale">Sale</option>
-          <option value="Rent">Rent</option>
-        </select>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>F</b>
+            </span>
+          </div>
+          <select
+            class="form-control form-control-lg form-control-a"
+            id="forSelector"
+            v-model="selectedType"
+            @change="TypeSelected"
+          >
+            <option value="Sale">Sale</option>
+            <option value="Rent">Rent</option>
+          </select>
+        </div>
       </div>
       <div class="form-group" v-if="propertyType === 'Residential'">
-        <label for="city">Property Type</label>
-        <select
-          class="form-control form-control-lg form-control-a"
-          id="forSelector"
-          v-model="selectedPropertyTypeRes"
-          @change="PropertyTypeSelected"
-        >
-          <option>All</option>
-          <option
-            v-for="(propertyType, i) in propertyTypesRes"
-            :key="i"
-          >{{ propertyType.description }}</option>
-        </select>
+        <label for="propertytype">Property Type</label>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>T</b>
+            </span>
+          </div>
+          <select
+            class="form-control form-control-lg form-control-a"
+            id="forSelector"
+            v-model="selectedPropertyTypeRes"
+            @change="PropertyTypeSelected"
+          >
+            <option>All</option>
+            <option
+              v-for="(propertyType, i) in propertyTypesRes"
+              :key="i"
+            >{{ propertyType.description }}</option>
+          </select>
+        </div>
       </div>
       <div v-else class="form-group">
-        <label for="city">Property Type</label>
-        <select
-          class="form-control form-control-lg form-control-a"
-          id="forSelector"
-          v-model="selectedPropertyTypeCom"
-          @change="PropertyTypeSelected"
-        >
-          <option>All</option>
-          <option
-            v-for="(propertyType, i) in propertyTypesCom"
-            :key="i"
-          >{{ propertyType.description }}</option>
-        </select>
+        <label for="propertytype">Property Type</label>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>T</b>
+            </span>
+          </div>
+          <select
+            class="form-control form-control-lg form-control-a"
+            id="forSelector"
+            v-model="selectedPropertyTypeCom"
+            @change="PropertyTypeSelected"
+          >
+            <option>All</option>
+            <option
+              v-for="(propertyType, i) in propertyTypesCom"
+              :key="i"
+            >{{ propertyType.description }}</option>
+          </select>
+        </div>
       </div>
       <div class="form-group">
-        <label for="city">Province</label>
-        <select
-          class="form-control form-control-lg form-control-a"
-          id="provinceselector"
-          @change="ProvinceSelected"
-          v-model="selectedProvince"
-        >
-          <option>All</option>
-          <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
-        </select>
+        <label for="province">Province</label>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>P</b>
+            </span>
+          </div>
+          <select
+            class="form-control form-control-lg form-control-a"
+            id="provinceselector"
+            @change="ProvinceSelected"
+            v-model="selectedProvince"
+          >
+            <option>All</option>
+            <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
+          </select>
+        </div>
       </div>
     </div>
-    <div class="col-md-6 mb-2">
+    <div class="container text-left">
       <div class="form-group">
         <label for="city">City</label>
-        <select
-          class="form-control form-control-lg form-control-a"
-          id="cityselector"
-          @change="CitySelected"
-          v-model="selectedCity"
-        >
-          <option>All</option>
-          <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
-        </select>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>C</b>
+            </span>
+          </div>
+          <select
+            class="form-control form-control-lg form-control-a"
+            id="cityselector"
+            @change="CitySelected"
+            v-model="selectedCity"
+          >
+            <option>All</option>
+            <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
+          </select>
+        </div>
       </div>
     </div>
-    <div class="col-md-6 mb-2">
+    <div class="container text-left">
       <div class="form-group">
-        <label for="city">Suburb</label>
-        <select
-          class="form-control form-control-lg form-control-a"
-          id="suburbselector"
-          v-model="selectedSuburb"
-          @change="SuburbSelected"
-        >
-          <option>All</option>
-          <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
-        </select>
+        <label for="suburb">Suburb</label>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>S</b>
+            </span>
+          </div>
+          <select
+            class="form-control form-control-lg form-control-a"
+            id="suburbselector"
+            v-model="selectedSuburb"
+            @change="SuburbSelected"
+          >
+            <option>All</option>
+            <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
+          </select>
+        </div>
       </div>
     </div>
   </div>

src/components/shared/searchTab.vue

   <!-- eslint-disable max-len -->
   <div class="box-collapse">
     <div class="title-box-d">
-      <h3 class="title-d">Search</h3>
+      <h3 class="title-d" style="text-align:left">Search</h3>
     </div>
     <span class="close-box-collapse right-boxed ion-ios-close"></span>
     <div class="box-collapse-wrap">
       <form class="form-a">
         <div class="row">
           <div class="col-md-12 mb-2">
-            <div class="form-group">
+            <div class="form-group" style="text-align:left">
               <label for="Type">Keyword</label>
               <input
                 type="text"