I am trying to display fa-icon before my input.
My html code is as follows:
<table width="788" border="0">
<tr> <td> <input type="hidden" name="c_id" id="c_id" value="<?php echo $id; ?>"> </td> </tr>
<tr>
<td width="150"><p>
<label for="firstname">Customer First Name</label>
</p>
<p>
<label class="input">
<i class="fa fa-user" aria-hidden="true"></i>
<input class="myinput" type="text" name="firstname" id="fn" placeholder="First Name" value="<?php echo $firstname1; ?>" >
</label>
</p></td>
<td width="243"><p>
<label for="middlename">Customer Middle Name</label>
</p>
<p>
<label class="input">
<i class="fa fa-user" aria-hidden="true"></i>
<input class="myinput" type="text" name="middlename" id="middlename" value="<?php echo $m_name2; ?>" placeholder="Middle Name"> </label>
</p></td>
<td width="250"><p>
<label for="lastname">Customer Last Name</label>
</p>
<p>
<label class="input">
<i class="fa fa-user" aria-hidden="true"></i>
<input class="myinput" type="text" name="lastname" id="lastname" placeholder="Last Name" value="<?php echo $lastname3; ?> " >
</label>
</p></td></tr>
</table>
CSS is as follows:
i {
color: #c0c2c7;
margin-right: 10px;
margin-top: 4px;
padding: 2px 8px;
float:left;
}
.myinput
{
width:100%;
float:left;
}
input
{
background-color: #3CBC8D;
color: white;
display: inline-block;
padding: 5px 10px;
float:left;
width:90%;
}
The fa icon appears above the input field. I want the icon to appear before the input field. Is there any solution for that? I tried display inline and inline block properties. What can be the solution to this?
Solved : Easy and best to implement by using below concept:
.input{position:relative}
.icon-wrapper{position:absolute; display:block; width:25px; height:25px; left:1px; top:1px;}
.myinput{padding-left:15px;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<label class="input">
<span class="icon-wrapper"><i class="fa fa-user" aria-hidden="true"></i></span>
<input class="myinput" type="text" name="firstname" id="fn" placeholder="First Name" value="" >
</label>
Try this:
i.fa{
color: #c0c2c7;
margin-right: 10px;
margin-top: 4px;
padding: 2px 8px;
//float:left;
display: inline-block;
width:10%;
}
.myinput
{
//width:100%;
//float:left;
}
input
{
background-color: #3CBC8D;
color: white;
display: inline-block;
padding: 5px 10px;
//float:left;
width:90%;
}
try this
i {
color: #c0c2c7;
margin-right: 10px;
margin-top: 4px;
padding: 2px 8px;
float:left;
display: inline-block;
width: 10%;
}
and remove
.myinput
{
width:100%;
float:left;
}
use bootstrap classes to achieve this functionality like below
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
More Examples
Related
div input:not(:first-of-type){
display: block;
}
#left_side{
width: 40%
}
label{
width:15em;
display: inline-block;
vertical-align: top;
}
input{
width: 23em;
border-style:solid;
border:1px solid black;
}
.group div{
margin-bottom: -1px;
}
.group input {
margin-bottom: -1px;
box-shadow: none;
background-color: antiquewhite;
}
.get{
width:23em;
display: inline-block;
}
<div class="group">
<div>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" class="get">
</div>
<div>
<label for="last_name">First Name:</label>
<input type="text" id="last_name" class="get">
</div>
</div>
<!--Here is some code with grouped boxes:-->
<div>
<label for="address_1_ln_1">Address 1:</label>
<div class="get">
<input type="text" id="address_1_ln_1">
<input type="text" id="address_1_ln_2">
</div>
</div>
<div>
<label for="address_2_ln_1">Address 2:</label>
<div class="get">
<input type="text" id="address_1_ln_1">
<input type="text" id="address_2_ln_2">
</div>
</div>
<div>
<label for="city">City:</label>
<input type="text" id="city" class="get">
</div>
<div>
<label for="state">State:</label>
<input type="text" id="state" class="get">
</div>
<dive>
<label for="zip">Zip:</label>
<input type="text" id="zip" class="get">
</dive>
How do you make text input of forms overlap borders like border: collapse on a table? By default stacking them one on top of the other has them develop a 2px border between adjacent inputs. Ideally both the borders should merge.
You could do
input {
margin-bottom: -1px;
}
Really struggling to center align a Recaptcha within a Contact 7 form.
I've tried multiple solutions from Google but none have worked.
I don't know which bit is needed, so here is the element:
<div role="form" class="wpcf7" id="wpcf7-f116-p87-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/contactus/?w3tc_note=flush_all#wpcf7-f116-p87-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;"> <input type="hidden" name="_wpcf7" value="116"> <input type="hidden" name="_wpcf7_version" value="5.0.4"> <input type="hidden" name="_wpcf7_locale" value="en_US"> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f116-p87-o1"> <input type="hidden" name="_wpcf7_container_post" value="87"> </div>
<p><label> Your Name (required)<br>
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Your Email<br>
<span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Your Phone Number<br> <span class="wpcf7-form-control-wrap tel-563"><input type="tel" name="tel-563" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false"></span> </label></p>
<p><label> Subject<br>
<span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false"></span> </label></p>
<p><label> Your Message<br>
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><label> Please confirm you're a human</label></p>
<div class="wpcf7-form-control-wrap">
<div data-sitekey="XXXXXXXXXXXXX" class="wpcf7-form-control g-recaptcha wpcf7-recaptcha">
<div style="width: 304px; height: 78px;">
<div><iframe src="https://www.google.com/recaptcha/api2/anchor?ar=1&k=XXXXXXXXXXXXX-nrxCQzWkg_6m86NQ2Veyo&co=aHR0cDovL3ZrMWhhaXIuY28udWs6ODA.&hl=en&v=v1540189908068&size=normal&cb=39arzn19kut6" width="304" height="78" role="presentation" name="a-7up0lnyvb9r4" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe></div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
</div>
</div> <noscript>
<div style="width: 302px; height: 422px;">
<div style="width: 302px; height: 422px; position: relative;">
<div style="width: 302px; height: 422px; position: absolute;">
<iframe src="https://www.google.com/recaptcha/api/fallback?k=XXXXXXXXXXXXX-XXXXXXXXXXXXX" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;">
</iframe> </div>
<div style="width: 300px; height: 60px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;">
</textarea> </div>
</div>
</div>
</noscript>
</div>
<p> </p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></p>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
</div>
Another user said it may be easier to see it, so I've uploaded the above code onto an html here: http://stargazysolutions.com/users/test.htm
Just wanting to get the recaptcha centered in the middle of the page.
Any ideas?
Thanks
Add this code to your theme's style.css file, save it and check your WordPress contact page again where you published this form.
.wpcf7-recaptcha > div {
margin: 0 auto;
}
Note: It will make effect all CF7 forms and make all Recaptcha fields center align.
How to put form labels inside a input form only on mobile?
example:
my code:
<form>
<div class="form-group">
<label class="form-control-label" for="firstName">Firstname</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="lastName">Lastname</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="phone_number">Mobile Number</label>
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10"required pattern="0[689]?[0-9]{8}" />
</div>
</form>
Something like this? I changed the position of input and label in the HTML
.form-group {
position: relative;
min-height: 3.5em;
}
input.form-control {
height: 3em;
position: absolute;
top: 0;
left: 0;
}
label.form-control-label {
position: absolute;
font-size: .8em;
top: 0;
left: 5px;
text-transform: uppercase;
}
<form>
<div class="form-group">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
<label class="form-control-label" for="firstName">Firstname</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
<label class="form-control-label" for="lastName">Lastname</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
<label class="form-control-label" for="phone_number">Mobile Number</label>
</div>
</form>
You can use like the below method. We have to write mobile screen style with in the media queries
body{
font-family:arial;
}
.form-group{
position:relative;
}
.input-element{
padding:30px 5px 5px 5px;
width:100%;
border:1px solid #CCC;
}
#media screen and (max-width: 767px) {
.label-element{
position:absolute;
top:5px;
left:5px;
font-size:12px;
color:#666;
}
}
<div class="form-group"><label class="label-element">First Name</label>
<input type="text" class="input-element"/></div>
I've just added a border to form-group and overwritten some bootstrap code.
For mobile only, try to use CSS3 Media Queries.
You could try this:
.form-group {
border: 1px solid black; /* Change border width and color here */
}
/* the !important declaration is for this snippet, because this snippet include bootstrap after this declarations **/
.form-control {
border: none !important; /* No border for input */
box-shadow: none !important; /* No border for input */
}
.form-control:focus {
box-shadow: none !important; /* Remove the blue shining at focus */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<label class="form-control-label" for="firstName">Firstname</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="lastName">Lastname</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="phone_number">Mobile Number</label>
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
</div>
</form>
Inspired by another answer, here is a short way to do it:
.input-group {
position: relative;
}
.input-label {
position: absolute;
top: 5px;
left: 5px;
color: #666;
}
.input-element {
padding: 30px 5px 5px 5px;
}
<div class="input-group">
<label class="input-label">First name</label>
<input type="text" class="input-element" />
</div>
<!-- Main -->
<div id="main-wrapper">
<div class="container">
<div id="content">
<article>
<!-- Form Code Start -->
<form id='contactus' action='<?php echo $formproc->GetSelfScript(); ?>' method='post' accept-charset='UTF-8'>
<fieldset>
<legend>Contact us</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/>
<input type='text2' class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' />
<div class='short_explanation'>* required fields</div>
<div>
<span class='error'>
<?php echo $formproc->GetErrorMessage(); ?>
</span>
</div>
<div class='container2'>
<label for='name' >Your Full Name*: </label><br/>
<input type='text2' name='name' id='name' value='<?php echo $formproc->SafeDisplay('name') ?>' maxlength="50" /><br/>
<span id='contactus_name_errorloc' class='error'></span>
</div>
<div class='container2'>
<label for='email' >Email Address*:</label><br/>
<input type='text2' name='email' id='email' value='<?php echo $formproc->SafeDisplay('email') ?>' maxlength="50" /><br/>
<span id='contactus_email_errorloc' class='error'></span>
</div>
<div class='container2'>
<label for='phone' >Phone Number:</label><br/>
<input type='text2' name='phone' id='phone' value='<?php echo $formproc->SafeDisplay('phone') ?>' maxlength="15" /><br/>
<span id='contactus_phone_errorloc' class='error'></span>
</div>
<div class='container2'>
<label for='query_type' >Regarding:</label><br/>
<select name='query_type'>
<option>Support</option>
<option>Request A Quote</option>
<option>Trouble uploading a file</option>
<option>Other</option>
</select>
<span id='contactus_email_errorloc' class='error'></span>
</div>
<div class='container2'>
<label for='message' >Message:</label><br/>
<span id='contactus_message_errorloc' class='error'></span>
<textarea rows="10" cols="50" name='message' id='message'><?php echo $formproc->SafeDisplay('message') ?></textarea>
</div>
<div class='container2'>
<div><img alt='Captcha image' src='show-captcha.php?rand=1' id='scaptcha_img' /></div>
<label for='scaptcha' >Enter the code above here:</label>
<input type='text2' name='scaptcha' id='scaptcha' maxlength="10" /><br/>
<span id='contactus_scaptcha_errorloc' class='error'></span>
<div class='short_explanation'>Can't read the image?
<a href='javascript: refresh_captcha_img();'>Click here to refresh</a>.</div>
</div>
<div class='container2'>
<input type='submit' name='Submit' value='Submit' />
</div>
</fieldset>
</form>
</article>
</div>
</div>
</div>
#contactus fieldset{
padding:20px;
border:1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin:0 auto;
width:459px;
}
#contactus legend, h2{
font-family : Arial, sans-serif;
font-size: 1.3em;
font-weight:bold;
color:#333;
}
#contactus label2{
font-family : Arial, sans-serif;
font-size:0.8em;
font-weight: bold;
}
/* #contactus input[type="text2"], textarea{
font-family : Arial, Verdana, sans-serif;
font-size: 0.8em;
line-height:140%;
color : #000;
padding : 3px;
border : 1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#contactus input[type="text2"]{
height:26px;
width:459px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#contactus #scaptcha{
width:80px;
height:26px;
}
#contactus input[type="submit2"]{
width:100px;
height:30px;
padding-left:0px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#contactus textarea2{
height:120px;
width:469px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#contactus input[type="text2"]:focus,textarea:focus{
color : #009;
border : 1px solid #0E0D0D;
background-color : #D1E7FF;
font-weight:bold;
}
#contactus .container2{
margin-top:8px;
margin-bottom: 10px;
}
#contactus .error{
font-family: Verdana, Arial, sans-serif;
font-size: 0.7em;
color: #900;
background-color : #FF8088;
}
#contactus fieldset#antispam{
padding:2px;
border-top:1px solid #EEE;
border-left:0;
border-right:0;
border-bottom:0;
width:350px;
}
#contactus fieldset#antispam legend{
font-family : Arial, sans-serif;
font-size: 0.8em;
font-weight:bold;
color:#333;
}
#contactus .short_explanation{
font-family : Arial, sans-serif;
font-size: 0.8em;
color:#333;
}
/* spam_trap: This input is hidden. This is here to trick the spam bots*/
#contactus .spmhidip{
display:none;
width:10px;
height:3px;
}
#fg_crdiv{
font-family : Arial, sans-serif;
font-size: 0.3em;
opacity: .2;
-moz-opacity: .2;
filter: alpha(opacity=20);
}
#fg_crdiv p{
display:none;
}
I've tried everything, I can't figure out what is affecting the form to cause it to run off the screen on a mobile device. Here is the link to the form.
in main.css you have hard-coded some widths for example width of input fields, width of fieldset. Just remove them or make them in percentage and your page will become responsive
It is hard to tell from the snippet but when the following code is placed in the document inspector it seems to work
Your hard coded widths were causing the issue, you may have to also modify your other media queries and break points to get it working at every size
#media screen and (max-width: 736px){
body, input, select, textarea {
line-height: 2em;
width: 100%;
}
#contactus input[type="text2"] {
height: 26px;
width: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
}
<link rel="stylesheet prefetch" href="https://www.munroprinting.com/assets/css/main.css">
<div class="container">
<div id="content">
<article>
<!-- Form Code Start -->
<form id="contactus" action="/upload/contactform.php" method="post" accept-charset="UTF-8">
<fieldset>
<legend>Contact us</legend>
<input type="hidden" name="submitted" id="submitted" value="1">
<input type="hidden" name="id3a31ca8adb123c3ea7b9" value="432ce4949a45b03c0299f37b81305012">
<input type="text2" class="spmhidip" name="sp5d7f1e2089582b5699eab58b16dad351">
<div class="short_explanation">* required fields</div>
<div><span class="error"></span></div>
<div class="container2">
<label for="name">Your Full Name*: </label><br>
<input type="text2" name="name" id="name" value="" maxlength="50" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg=="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;"><br>
<span id="contactus_name_errorloc" class="error"></span>
</div>
<div class="container2">
<label for="email">Email Address*:</label><br>
<input type="text2" name="email" id="email" value="" maxlength="50"><br>
<span id="contactus_email_errorloc" class="error"></span>
</div>
<div class="container2">
<label for="phone">Phone Number:</label><br>
<input type="text2" name="phone" id="phone" value="" maxlength="15"><br>
<span id="contactus_phone_errorloc" class="error"></span>
</div>
<div class="container2">
<label for="query_type">Regarding:</label><br>
<select name="query_type">
<option>Support</option>
<option>Request A Quote</option>
<option>Trouble uploading a file</option>
<option>Other</option>
</select>
<span id="contactus_email_errorloc" class="error"></span>
</div>
<div class="container2">
<label for="message">Message:</label><br>
<span id="contactus_message_errorloc" class="error"></span>
<textarea rows="10" cols="50" name="message" id="message"></textarea>
</div>
<div class="container2">
<div><img alt="Captcha image" src="show-captcha.php?rand=1" id="scaptcha_img"></div>
<label for="scaptcha">Enter the code above here:</label>
<input type="text2" name="scaptcha" id="scaptcha" maxlength="10"><br>
<span id="contactus_scaptcha_errorloc" class="error"></span>
<div class="short_explanation">Can't read the image?
Click here to refresh.</div>
</div>
<div class="container2">
<input type="submit" name="Submit" value="Submit">
</div>
</fieldset>
</form>
</article>
</div>
</div>
I am trying to align this radio buttons on my form, but for some reason they are kinda big and the texts are way above.
Here is my html page:
<div id="sabores">
<form action="" method="post">
<input type="radio" name="txt_sabor" value="natural" class="radiobtn" /> Natural </br>
<input type="radio" name="txt_sabor" value="laranja_com_acerola" class="radiobtn" /> Laranja com Acerola </br>
<input type="radio" name="txt_sabor" value="morango" class="radiobtn" /> Morango </br>
<input type="radio" name="txt_sabor" value="limao" class="radiobtn" /> Limão </br>
<input type="radio" name="txt_sabor" value="acai_com_guarana" class="radiobtn" /> Açaí com Guaraná</br>
<input type="radio" name="txt_sabor" value="uva" class="radiobtn" /> Uva </br>
<input type="radio" name="txt_sabor" value="abacaxi" class="radiobtn" /> Abacaxi </br>
</form>
</div>
and here is my CSS:
#sabores{
width: 370px;
height: 215px;
border: 1px solid #ccc;
float: left;
margin-top: 10px;
background: #fff;
color: #667;
font-size: 12px;
}
#sabores h2{
width: 364px;
color: #333;s
}
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
display: block;
clear: left;
float: left;
vertical-align:bottom;
margin-top: 10px;
}
Your have mistype your br, instead of <br />. And to correct your problem and add a good accessibility practice at same time you can wrap your radio button with text in a label. You can use paragraphs <p> instead of <br /> too. And remove your clear: left; float:left you don't need to precise display:block if your element is floating.
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
vertical-align:bottom;
margin-top: 10px;
}
<div id="sabores">
<form action="" method="post">
<label for="txt_sabor_natural"><!-- for with id value of input inside it-->
<input type="radio" name="txt_sabor" id="txt_sabor_natural" value="natural" class="radiobtn" /> Natural </label><br />
<label for="laranja">
<input type="radio" name="txt_sabor" id="laranja" value="laranja_com_acerola" class="radiobtn" /> Laranja com Acerola</label><br />
<label for="morango">
<input type="radio" name="txt_sabor" id="morango" value="morango" class="radiobtn" /> Morango </label><br />
<label for="limao">
<input type="radio" name="txt_sabor" id="limao" value="limao" class="radiobtn" /> Limão </label><br />
<label for="acai_com_guarana">
<input type="radio" name="txt_sabor" id="acai_com_guarana" value="acai_com_guarana" class="radiobtn" /> Açaí com Guaraná </label><br />
<label for="uva">
<input type="radio" name="txt_sabor" id="uva" value="uva" class="radiobtn" /> Uva </label><br />
<label for="abacaxi">
<input type="radio" name="txt_sabor" id="abacaxi" value="abacaxi" class="radiobtn" /> Abacaxi </label><br />
</form>
</div>
Better solution is to use an unordered list ul with li for each couple label + input or paragraphs, and remove your fixed height from sabores div :
<div id="sabores">
<form action="" method="post">
<p>
<label for="txt_sabor_natural"><!-- for with id value of input inside it-->
<input type="radio" name="txt_sabor" id="txt_sabor_natural" value="natural" class="radiobtn" /> Natural </label></p>
<p>
<label for="laranja">
<input type="radio" name="txt_sabor" id="laranja" value="laranja_com_acerola" class="radiobtn" /> Laranja com Acerola</label></p>
<p>
<label for="morango">
<input type="radio" name="txt_sabor" id="morango" value="morango" class="radiobtn" /> Morango </label></p>
<p>
<label for="limao">
<input type="radio" name="txt_sabor" id="limao" value="limao" class="radiobtn" /> Limão </label></p>
<p>
<label for="acai_com_guarana">
<input type="radio" name="txt_sabor" id="acai_com_guarana" value="acai_com_guarana" class="radiobtn" /> Açaí com Guaraná </label></p>
<p>
<label for="uva">
<input type="radio" name="txt_sabor" id="uva" value="uva" class="radiobtn" /> Uva </label></p>
<p>
<label for="abacaxi">
<input type="radio" name="txt_sabor" id="abacaxi" value="abacaxi" class="radiobtn" /> Abacaxi </label></p>
</form>
</div>
With style :
/*previous style*/
#sabores{
width: 370px;
/*height: 215px; don't need*/
border: 1px solid #ccc;
float: left;
margin-top: 10px;
background: #fff;
color: #667;
font-size: 12px;
}
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
vertical-align:bottom;
}
#sabores p {
margin-bottom: 10px;
margin-top: 0;
}
Make the following changes to this class:
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
margin-top: 10px;
vertical-align:bottom;
/*
Remove following css properties
display: block;
clear: left;
float: left;
*/
}
fiddle
Please pay more attention the follow class:
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
display: block;
clear: left;
float: left;
vertical-align:bottom;
margin-top: 10px;
}
as you see, you use these attributes:
display:block; clear: left; float: left;
It makes your input Element out of page flow, so you can remove these attribute and everything will be ok!
I advise you can read it about Visual formatting model.(click here)