Compact Form Fields (tipo Material) per Bootstrap

Ho creato un css semplice che troverete QUI dove i campi di un form, nello specifico text, textarea e select, simulano quelli di Material, portando la label all’interno dello spazio del campo.

È richiesto l’utilizzo di bootstrap (ho testato la versione 5, non le altre) in quanto la modifica dello stile è proprio basato sul css di bootstrap.

	.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;
	}

view raw compactFormFields.css hosted with ❤ by GitHub

	<!– 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>