CompactFormFields for Bootstrap - HTML Select with label inside the top of the field itself

compactFormFields.css

.compact-formfields > .form-label{
	padding-top: 5px;
	font-weight: 100;
	margin-bottom: -10px !important;

	background-color: white !important;
	height: 42px;
	width: 100%;
	border: 1px solid #ddd;
	padding-left: 11px;
	border-bottom: none;
	border-top-left-radius: 4px !important;
	border-top-right-radius: 4px !important;
}
.compact-formfields > input,
.compact-formfields > textarea{
	border-top: none !important;
	margin-top: -5px;
	border-top-left-radius: 0px !important;
	border-top-right-radius: 0px !important;
}
.compact-formfields > select{
	margin-top: -5px;
}
.compact-formfields > input:focus,
.compact-formfields > select:focus,
.compact-formfields > textarea:focus,
.compact-formfields > button:focus {
	outline: none !important;
	outline-color: transparent !important;
	outline-style: none !important;
	box-shadow: none !important;
	border-color: #ddd !important;
}

compactFormFields.html

<!-- SELECT FIELD -->
<div class='compact-formfields'>
    <label for='field1' class="form-label">Field 1</label>
    <select name='field1' class="form-select">

        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>

    </select>
</div>

<!-- TEXT INPUT FIELD -->
<div class='compact-formfields'>
    <label for='field2' class='form-label'>Field 2</label>
    <input type='text' class='form-control' id='field2' name='field2'>
</div>

<!-- TEXTAREA INPUT FIELD -->
<div class='compact-formfields'>
    <label for="field3" class="form-label">Field 3</label>
    <textarea class="form-control" id="field3" name="field3" placeholder="Type your message"></textarea>
</div>