HTML
xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="utf-8">6
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">7
<meta http-equiv="x-ua-compatible" content="ie=edge">8
<title>Material Design Bootstrap</title>9
<!-- Font Awesome -->10
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">11
<!-- Bootstrap core CSS -->12
<link href="css/bootstrap.min.css" rel="stylesheet">13
<!-- Material Design Bootstrap -->14
<link href="css/mdb.min.css" rel="stylesheet">15
<!-- Your custom styles (optional) -->16
<link href="css/style.css" rel="stylesheet">17
</head>18
19
<body>20
<!-- /Start your project here-->21
<div class="row">22
<div class="col-3"></div>23
<div class="col-6">24
<br>25
<h3>Test MDB Select 4.8.2</h3>26
<br>27
<br>28
<br>29
</div>30
<div class="col-3"></div>31
</div>32
<div class="row">33
<div class="col-3"></div>34
<div class="col-6">35
<div class="md-form">36
<input autofocus type="text" id="textbox1" tabindex="50" class="form-control">37
<label for="textbox1">Textbox1</label>38
</div>39
</div>40
<div class="col-3"></div>41
</div>42
<div class="row">43
<div class="col-3"></div>44
<div class="col-6">45
<div class="md-form">46
<input type="text" id="textbox2" tabindex="51" class="form-control">47
<label for="textbox2">Textbox2</label>48
</div>49
</div>50
<div class="col-3"></div>51
</div>52
<div class="row">53
<div class="col-3"></div>54
<div class="col-6">55
<select id="selectCountry" tabindex="52" class="mdb-select md-form" searchable="Search here..">56
<option value="" disabled selected>Choose your country</option>57
<option value="1">USA</option>58
<option value="2">Germany</option>59
<option value="3">France</option>60
<option value="3">Poland</option>61
<option value="3">Japan</option>62
</select>63
<label class="mdb-main-label">Label example</label>64
</div>65
<div class="col-3"></div>66
</div>67
<div class="row">68
<div class="col-3"></div>69
<div class="col-6">70
<div class="md-form">71
<input type="text" id="textbox3" tabindex="53" class="form-control">72
<label for="textbox3">Textbox3</label>73
</div>74
</div>75
<div class="col-3"></div>76
</div>77
<div class="row">78
<div class="col-3"></div>79
<div class="col-6">80
<div class="md-form">81
<input type="text" id="textbox4" tabindex="54" class="form-control">82
<label for="textbox4">Textbox4</label>83
</div>84
</div>85
<div class="col-3"></div>86
</div>87
88
<!-- SCRIPTS -->89
<!-- JQuery -->90
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>91
<!-- Bootstrap tooltips -->92
<script type="text/javascript" src="js/popper.min.js"></script>93
<!-- Bootstrap core JavaScript -->94
<script type="text/javascript" src="js/bootstrap.min.js"></script>95
<!-- MDB core JavaScript -->96
<script type="text/javascript" src="js/mdb.min.js"></script>97
98
<script>99
$(document).ready(function () {100
$('.mdb-select').materialSelect();101
});102
103
</script>104
105
</body>106
107
</html>CSS
1
1
JS
1
1
Console errors: 0