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有一个名为＆＃34; input-group-addon＆＃34;这会做你正在谈论的事情。如果您没有使用Bootstrap，也许您仍然可以借用该课程的css，如果它看起来像您为您的项目设想的那样。这里有一个例子：http://getbootstrap.com/css/#forms

Answer 2

您不能使用输入控件之前或之后。因此，为了实现最终结果，您需要使用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一起使用，你可以试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

输入字段中必需的星号

3 个答案: