必填字段的星号符号答案

【问题标题】：asterisk symbol for required field必填字段的星号符号
【发布时间】：2015-01-21 04:20:01
【问题描述】：

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

这个问题是由于输入框 css 代码造成的。在这里，我在 php 代码中附上了我的 css、html 和屏幕截图。

 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%;
}

【问题讨论】：

请任何人都可以创建jsfiddle
我在我的答案中添加了一个示例 jsFiddle，以及一篇您可以查看以进一步了解浮点数的文章。

标签： html css

【解决方案1】：

您将字段浮动到右侧，因此它们被拉出线并被推到容器的右侧。星号不浮动，因此它们与其他未浮动的文本保持一致。

要更正，您应该将字段和星号放在一个本身向右浮动的容器中，而不是浮动字段。

我会建议一个更像这样的结构而不是：

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

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

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

...并像这样使用css：

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 伪选择器 - https://developer.mozilla.org/en-US/docs/Web/CSS/::before
CSS ::after 伪选择器 - https://developer.mozilla.org/en-US/docs/Web/CSS/::after

【讨论】：

【解决方案2】：

如果你想使用'margin-right:'，我认为你必须将星号与文本框结合起来。您可以将所有内容放在一个 div 中，并给它右边距

【讨论】：

【解决方案3】：

<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="">

【讨论】：