asterisk symbol for required field

Question

I want to place a '*' symbol after an input box. I have a problem while displaying.

This problem is due to inputbox css code. Here I attached my css,html within php code with a screenshot.

 echo '<p>Name<input type="text" name="pname" id="pname" size=18 maxlength=50 required value="'.$name.'" >*</p>';

         echo "<p>Email<input type=text name=email id=email size=18 maxlength=50 required onblur='javascript:myFunction(this.value,\"".$fet['email']."\");' value='".$email."' >*</p>";
         echo '<p>Phone<span id="error" style="color: Red; display: none"><img src="image/number.png" width=20px height=20/></span><input type="text" name="phone" size=18 maxlength=50 required onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" value="'.$phone.'" ></p>';
         echo '<p>Company Name<input type="text" name="cname" id="cname" size=18 maxlength=50 required value="'.$cname.'" ></p>';

css code for input

input {
display: inline-block;
float: right;
margin-right:20%;
}

Answer 1

You are floating the fields right, so they are plucked out of the line and pushed to the right of the container. The asterisks are not floated, so they stay in line with the rest of the text that is also not floated.

To correct, you should place the field and the asterisk in a container that is itself floated right, rather than floating the field.

I would suggest a structure more like this instead:

<p class="field-wrapper">
    <label>Field label</label>
    <input type="text" name="fieldName" id="fieldId" size=18 maxlength=50 value="fieldValue" />
</p>

You can add a required-field class on the wrapper, like this:

  <p class="field-wrapper required-field">

... and use css like this:

p.field-wrapper input {
    float: right;
}
p.required-field label::after { 
    content: "*";
    color: red;
}

Try it: http://jsfiddle.net/q8rsLz16/

Documentation & Related Reading

• All about Floats via CSS Tricks - http://css-tricks.com/all-about-floats/
• CSS ::before pseudo-selector - https://developer.mozilla.org/en-US/docs/Web/CSS/::before
• CSS ::after pseudo-selector - https://developer.mozilla.org/en-US/docs/Web/CSS/::after

Answer 2

<label>Name<span  style="color:red"> *</span></label>
<input type="text" name="pname" id="pname" size=18 maxlength=50 required value="">
<div class="clearfix" style="margin-bottom:10px"> </div>


<label>Email<span  style="color:red"> *</span></label>
<input type="text" name="pname" id="pname" size=18 maxlength=50 required value="">

Answer 3

I think you'll have to couple the asterisks with the text box if you want to use 'margin-right:'. You can put all in a div, and give it the right margin