Seeking advice on enhancing the styling of an HTML form I am developing for a course project. I'm particularly struggling to align the descriptors of radio buttons with their respective buttons. Any suggestions or guidance would be highly valued!
I have limited experience with HTML so I apologize in advance for any errors in the code.
Click here to view the current appearance of my radio buttons
HTML:
<h1> CONTACT FORM </h1>
<body>
<div class="container">
<form action="#" method="POST" class="form">
<label for="name">FULL NAME</label>
<input type="text" id="name" name="fullName" placeholder="Name" required />
<label for="email">EMAIL ADDRESS</label>
<input type="email" id="email" name="email address" placeholder="Email" required />
<label for="phone">PHONE NUMBER</label>
<input type="tel" id="tel" name="phone" placeholder="e.g. 012-345-6789" required />
<label for="email">HOME ADDRESS</label>
<input type="text" id="address" name="address" placeholder="Address" required />
<label for="message"> MESSAGE</label>
<textarea name="message" placeholder="Message" id="message" cols="40" rows="10"> </textarea>
<p class="contact_method"> PREFERRED METHOD OF CONTACT </p>
<div class="buttonradio">
<input type="radio" id="html" name="best_contact" value="HTML">
<label for="Phone">Phone</label><br>
<input type="radio" id="Email" name="best_contact" value="Email">
<label for="email">Email</label><br>
<input type="radio" id="text" name="best_contact" value="Text">
<label for="text">Text message</label>
</div>
<button type="submit">SUBMIT</button>
</form>
</div>
CSS:
h1 {
display: flex;
font-family: 'Frank Ruhl Libre', serif;
padding: 20px;
}
.container * {
box-sizing: border-box;
font-family: 'Frank Ruhl Libre', serif;
}
.form label {
display: block;
padding: 10px 0 5px 0;
font-size: 15px;
font-family: 'Frank Ruhl Libre', serif;
font-weight: bold;
}
.form input,
.form textarea {
font-size: 12px;
display:flex;
width: 50%;
padding: 15px;
background-color: #ffffff;
border: none;
border: 2px solid #000000;
outline: none;
border-radius: 10px;
color: #000000;
}
.form input:focus:required:invalid {
border-color: #000000;
background-color: #fff;
}
/* */
.form button {
display: block;
margin-top: 12px;
width: 50%;
padding: 12px 20px;
border-radius: 10px;
border-color: #000000;
background-color: #000000;
color: #fff;
font-weight: 500;
font-size: 13px;
font-family: 'Frank Ruhl Libre', serif;
}
/* send button styling */
button:hover {
background-color: chartreuse;
transition: background-color 2s;
/* change color on hover */
}
.buttonradio {
font-family: 'Frank Ruhl Libre', serif;
}
.buttonst input{
vertical-align: middle;
}
.contact_method {
font-family: 'Frank Ruhl Libre', serif;
font-size: 15px;
padding-left: 12px;
padding-top: 10px;
font-family: 'Frank Ruhl Libre', serif;
font-weight: bold;
}
.container label {
padding:5px;
color:#222;
font-size: 14px;
margin: 10px;
}
input[type="radio"] {
margin-top: -1px;
vertical-align: middle;
height: 100%;
}