xxxxxxxxxx1
<body class="elegant-color-dark">2
<div class="container">3
<div class="row mt-5">4
<div class="col">5
<h4 class="text-white mt-2">6
I would like to use this color schema <a href="https://bootswatch.com/darkly/">https://bootswatch.com/darkly/</a>7
</h4>8
9
<h4 class="text-white">10
Ideally i could just import their settings, but they provide their own bootstrap.css and it breaks your mdb framework. Is there any way to import their settings without breaking MDB?11
</h4>12
13
<h4 class="text-white mt-5">14
The outline-input works pretty well. Except the "Example label" is square when it moves up above the input field (when you enter the input). How to fix this?15
</h4>16
<!-- Material outline input -->17
<div class="md-form md-outline">18
<input type="text" id="form1" class="form-control white">19
<label for="form1">Example label</label>20
</div>21
22
<h4 class="text-white mt-5">23
The outline-select has a square "Example Label" just as the outline-input. Here however, the borders of the input is square as well instead of rounded. If you look closely you can just see a very thin rounded grey line. This is also really clear when you click it and see the blue outline. How to fix this?24
</h4>25
</div>26
</div>27
<div class="row">28
<div class="col-md-6 select-outline">29
<select class="mdb-select md-form md-outline colorful-select dropdown-primary white">30
<option value="" disabled selected>Choose your option</option>31
<optgroup label="team 1">32
<option value="1">Option 1</option>33
<option value="2">Option 2</option>34
</optgroup>35
<optgroup label="team 2">36
<option value="3">Option 3</option>37
<option value="4">Option 4</option>38
</optgroup>39
</select>40
<label>Example label</label>41
42
</div>43
44
</div>45
</div>46
</body>xxxxxxxxxx1
.md-outline.select-wrapper+label {2
top: .5em !important;3
z-index: 2 !important;4
}xxxxxxxxxx1
// Material Select Initialization2
$(document).ready(function() {3
$('.mdb-select').materialSelect();4
$('.select-wrapper.md-form.md-outline input.select-dropdown').bind('focus blur', function () {5
$(this).closest('.select-outline').find('label').toggleClass('active');6
$(this).closest('.select-outline').find('.caret').toggleClass('active');7
});8
}); Console errors: 0