Currently, I am in the process of building a form that includes radio buttons. However, I've encountered an issue where the text next to the radio buttons appears on a different level than the buttons themselves.
How can I go about fixing this particular problem?
Check out our website for more information
Take a look at a screenshot showcasing the issue
This is the HTML code snippet:
<div class="d5-d8 m-all"id="contactFormContainer" >
<form name="mainForm" id="mainForm">
<p>Need help getting started or requesting more info?</p>
<input type="radio" value="Info" name="infoOrPurchase"> Request Info<br>
<input type="radio" value="Purchase" name="infoOrPurchase"> Request Service<br>
<br /><br />
<label><input type="text" value="First Name" onfocus="if (this.value=='First Name') this.value='';" onblur="this.value = this.value==''?'First Name':this.value;" size="35" /></label>
</form>
</div>
Here's the corresponding CSS:
#mainForm{
width:500px;
float:left;
}
input{
height:30px;
}
label{
margin-top:30px;
}
#commentsLabel{
height:80px;
}
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(238, 116, 33, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(238, 116, 33, 1);
}