JSFiddle - React, Tailwind, and code Playground

by bragboy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.min.js"></script>
<div>Select 2 Version: 3.5.1</div>
<div>jQuery Version: 2.0.0</div>

<br><br><br>

<form>
<select id='test' required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br><br><br>
<input type='text'/>
<br><br><br>
<input type="submit" value="Test" />
</form>

CSS

.select2-offscreen,
.select2-offscreen:focus {
  // Keep original element in the same spot
  // So that HTML5 valiation message appear in the correct position
  left: auto !important;
  top: auto !important;
}

JavaScript

$('#test').select2();