输入字段内必需的星号答案

【问题标题】：Required asterisk inside input field输入字段内必需的星号
【发布时间】：2016-07-29 20:35:03
【问题描述】：

是否可以在最右侧的输入字段内放置一个红色星号？我的表格上没有空间可以放星号，如果我放了星号，它看起来会很奇怪。这是我的输入的 css。

input {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13px;
}

有没有办法做到这一点？谢谢。

【问题讨论】：

通常，我建议使用:after 选择器，但由于inputs 是自闭合标签，因此它们不能包含内容。您可能需要考虑更改 HTML 以允许使用此 CSS，或者考虑使用 JavaScript 解决方案在加载后对其进行修改。
你厌倦了占位符属性吗？
@j08691，我正在使用占位符属性。我可以在其中定义 HTML 吗？
没有。占位符是文本，因为它们实际上是输入的内容。您放入的任何 html 都不会被渲染，因为它被解析为纯文本。这与在输入中输入一些 html 没有什么不同。
那么占位符根本不会做我想做的事哈哈。 @j08691

标签： html css required

【解决方案1】：

使用 Bootstrap，有一个名为“input-group-addon”的类可以完成您所说的操作。如果您不使用 Bootstrap，如果它看起来像您为项目设想的那样，也许您仍然可以为该类借用 css。这里有一个例子：http://getbootstrap.com/css/#forms

【讨论】：

form-control-feedback 与 input-group-addon 相比，与所需的类更相似

【解决方案2】：

您不能使用 before 或 after 进行输入控制。所以为了达到最终的效果，你需要用一个div包裹输入控件（使其成为inline-block）并使用css“after”来定位“*”

#wrapper {
  position: relative;
  display: inline-block;
  z-index: 1;
}
#wrapper input {
  padding-right: 14px;
}
#wrapper:after {
  content: "*";
  position: absolute;
  right: 5px;
  top: +3px;
  color: red;
  z-index: 5;
}

<div id="wrapper">
  <input type="text" />
</div>

【讨论】：

【解决方案3】：

如果你使用 bootsrap3 和 Glyphicons，你可以试试这个：

.requiredFieldWrapper::after 
{
    font-family: 'Glyphicons Halflings';
    content: '*';
    position: absolute;
    top:2px;
    bottom: 0;
    right: 17px;
    font-size: 10px;
    color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<br>
<br>
<div class="col-xs-10 requiredFieldWrapper">
 <input class="form-control" type="text" autocomplete="off" required>
</div>

【讨论】：