To style a form, there are various of properties for styling.
Ex:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
line-height: 1.5;
padding: 1rem;
}
label {
display: block;
}
input[type="text"],
input[type="email"] {
border: 1px solid #ccc;
border-radius: 5px;
padding: 0.5rem 0.7rem;
/* color transform when switching boxes */
transition: border-color 0.15s, box-shadow 0.15s;
}
/* when input box is selected */
input[type="text"]:focus,
input[type="email"]:focus {
border-color: #7db0fb;
/* get rid of system default outline */
outline: 0;
box-shadow: 0 0 0 4px rgba(24, 117, 255, 0.25);
}
button {
background-color: #0d6efd;
color: white;
border: 0;
padding: 0.5rem 0.7rem;
border-radius: 5px;
outline: 0;
}
.form-group {
margin-bottom: 1rem;
}