JSFiddle - React, Tailwind, and code Playground

by adamovic

HTML

<div class="page_wide text_block">
  <nav>
    <div class="select_location_form page_wide">
      <div class="standard_margin_inlineblock">
        <form
          style="display: inline; padding: 0; margin:0;"
        >
          <b> Select Location: </b><span class="after_select_location"></span>
          <span
            role="status"
            aria-live="polite"
            class="ui-helper-hidden-accessible"
          ></span
          ><input
            id="city_selector_city_id"
            size="26"
            type="text"
            placeholder="Type and Pick City"
            autocomplete="off"
            class="ui-autocomplete-input"
          />
          <input type="hidden" id="city_id" name="city_id" />
          <input type="hidden" id="name_city_id" name="name_city_id" />
        </form>
      </div>

      <div class="standard_margin_inlineblock before_or_select_location_form">
        <span class="or_in_select_location_form"><b> Or </b></span>
        <form
          method="get"
          style="display: inline; margin:0; padding:0;"
        >
          <select
            name="country"
            id="country"
            onchange="if (checkSelectedSomeText('country')) this.form.submit();"
          >
            <option value="">---Select Country---</option>
            <option value="Ireland">Ireland</option>
            <option value="Italy">Italy</option>
            <option value="Japan">Japan</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="United States">United States</option>
            <option value="Uruguay">Uruguay</option>
          </select>
        </form>
      </div>
    </div>
  </nav>
</div>

CSS

input, select {
    font-size: 16px;
    line-height: 1.5;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    height: 24px;
    vertical-align: middle;

    /* Normalize form control rendering */
    /*appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;*/
  }

 
.standard_margin, .hotel_outline_box, .comments_box, div.close_city_info {
  margin-top: 12px;
  margin-bottom: 12px;
}

.page_wide {
  min-width: 740px;
  border-spacing: 0px 2px;
  clear:both;
}

.standard_margin_inlineblock {
  /* use less since it doesn't stack together */
  margin-top: 4px;
  margin-bottom: 4px;
  display: inline-block;
}

.select_location_form {
  font-size: 110%;
  margin-top: 9px;
}  

.select_location_form input, .select_location_form select {
  font-size: 100%;
  min-width: 30ex;
  //background-color: #f6f6f6;
  background-color: #fbfbf8;
  width: 352px;
  padding: 1px 2px;
  padding-block: 1px;
  padding-inline: 2px;
}

.select_location_form input::placeholder, .select_location_form select::placeholder/*, 
.select_location_form input::-webkit-input-placeholder, .select_location_form select::-webkit-input-placeholder, 
.select_location_form input::-moz-placeholder, .select_location_form select::-moz-placeholder, 
.select_location_form input::-ms-input-placeholder, .select_location_form select::-ms-input-placeholder */
{
  color: 	#444;
}

.select_location_form input, .select_location_form select {
  color: #444;
  line-height: normal;
  vertical-align: middle;
  appearance: textfield;
}

.select_location_form select > option {
  appearance: textfield;
  height: 20px;
}

.select_location_form select:active, .select_location_form select:hover {
  color: initial;
}