Skip to content

Instantly share code, notes, and snippets.

@FANMixco

FANMixco/forms.html

Last active December 16, 2021 22:42
Show Gist options
  • Save FANMixco/15596fd76015fc9a7814578fe7fe6fe4 to your computer and use it in GitHub Desktop.
Save FANMixco/15596fd76015fc9a7814578fe7fe6fe4 to your computer and use it in GitHub Desktop.
Download ZIP
Input and Select Material Design Style for Bootstrap 5
Raw
forms.html
<!--Copyrights:
https://codingyaar.com/bootstrap-5-material-design-form-responsive/
-->
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<body>
<style>
.form-select, .form-control {
border: none;
border-bottom: 1px solid #000000;
border-radius: 0;
}
.form-select:focus, .form-control:focus {
box-shadow: inset 0 -1px 0 #2196f3;
border-bottom-color: #2196f3;
}
.form-select:focus + label, .form-control:focus + label{
color: #2196f3;
}
</style>
</head>
<body>
<div class="form">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" />
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating mb-3">
<select class="form-select" id="floatingSelect">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelect">Works with selects</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
<label for="floatingTextarea2">Comments</label>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment