必填字段的星号符号 [英] asterisk symbol for required field

问题描述

我想在输入框后放置一个'*'符号.显示时出现问题.

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

此问题归因于inputbox css代码.在这里，我在屏幕快照中将我的css，html附加在php代码中.

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代码

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

推荐答案

您正在向右浮动字段，因此将它们从行中拔出并推到容器的右边.星号不会浮动，因此它们与其余同样未浮动的文本保持一致.

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>

您可以在包装器上添加一个 required-field 类，如下所示:

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

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

...并像这样使用CSS:

... and use css like this:

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

尝试一下: http://jsfiddle.net/q8rsLz16/

文档和相关阅读

• 有关通过CSS技巧进行的浮动的所有信息- http://css-tricks.com/all-about-floats/
• CSS :: before 伪选择器-

• 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

这篇关于必填字段的星号符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！