Search

by Alex Azuero

HTML

<!DOCTYPE html>
<html dir="ltr">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
   <title>ArcGIS API for JavaScript | Customize Search widget</title>
   <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
   <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
   <style>
      html,
      body,
      #map,
      .map.container {
         padding: 0;
         margin: 0;
         height: 100%;
         width: 100%;
      }
      #info {
         top: 2px;
         color: #444;
         height: auto;
         font-family: arial;
         font-weight: bold;
         left: 69px;
         margin: 5px;
         padding: 10px;
         position: absolute;
         width: 260px;
         z-index: 40;
         border: solid 1px #003300;
         border-radius: 4px;
         background-color: #E5E5E5;
      }
      #search {
         display: block;
         position: absolute;
         z-index: 2;
         top: 70px;
         left: 74px;
      }
      /*Beginning of search box modifications*/
      .arcgisSearch .searchClear {
         background-color: #E5E5E5;
      }
      .arcgisSearch .esriIconZoom {
         background-image: url("finding.png");
         background-size: 20px 20px;
      }
      .esriIconZoom:before {
         content: "";
      }
      .arcgisSearch .searchGroup .searchInput,
      .arcgisSearch .searchBtn,
      .arcgisSearch .noResultsMenu,
      .arcgisSearch .suggestionsMenu {
         border: 1px solid #003300;
         background-color: #E5E5E5;
      }
      .arcgisSearch .noValueText {
         color: red;
         font-size: 14px;
      }
      /*Beginning of popup modifications*/
      .esriPopup .titlePane {
         background-color: #003300;
         border-bottom: 1px solid #121310;
         font-weight: bold;
      }
      .esriPopup a {
         color:...