JSFiddle - React, Tailwind, and code Playground

by tanvir_alam_shawn

HTML

<script src="//cdn.jsdelivr.net/chosen/1.1.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/chosen/1.1.0/chosen.min.css">
<form>
  <select required="required">
        <option value=""></option>
        <option value="1">aaaaaaaaaaaa</option>
        <option value="2">eeeeeeeeeeeee</option>
        <option value="3">iiiiiiiiiiii</option>
    </select>

  <hr/>

  <select required="required" multiple>
        <option value=""></option>
        <option value="1">zzzzzzzzzzzzzzzz</option>
        <option value="2">ppppppppppppppp</option>
        <option value="3">wwwwwwwwwwwwwwww</option>
    </select>

  <hr />
  <select required="required">
        <option value=""></option>
        <option value="1">aaaaaaaaaaaa</option>
        <option value="2">eeeeeeeeeeeee</option>
        <option value="3">iiiiiiiiiiii</option>
    </select>

  <br /><br />
  <input type="submit" value="Click" />
</form>

CSS

select:invalid {
  height: 0px !important;
  opacity: 0 !important;
  position: absolute !important;
  display: flex !important;
}

select:invalid[multiple] {
  margin-top: 15px !important;
}

JavaScript

$('select').chosen({
  allow_single_deselect: true
});