输入字段内需要星号

Question

是否可以在最右侧的输入字段内放置一个红色星号？我的表格上没有足够的空间来放置星号，如果我放置它们，它看起来会很奇怪。这是我的 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;
}

有什么办法可以做到吗？谢谢

Answer 1

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

Answer 2

您不能使用 before 或 after 进行输入控制。所以为了达到最终结果，您需要用 div 包裹输入控件（使其成为内联块）并使用 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>

Answer 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>

输入字段内需要星号

Required asterisk inside input field

html

css

required