输入字段内必需的星号

是否可以在最右边的输入字段中放置一个红色星号？我的表格上没有空格标出星号，如果我确实放了它，它会显得很奇怪。这是我的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; 
}

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

来源

2016-07-29 Nic

通常情况下，我会sugge st''：''后选择器，但因为'输入'是自闭标签，他们不能有内容。您可能不得不考虑对HTML进行更改以允许此CSS，或者JavaScript解决方案在加载后对其进行修改。 – Katana314

你累了占位符属性吗？ – j08691

@ j08691，我正在使用占位符属性。我可以在里面定义HTML吗？ – Nic

使用Bootstrap有一个叫做“input-group-addon”的类，它可以处理你正在谈论的内容。如果你没有使用Bootstrap，也许你仍然可以借用该类的CSS，如果它看起来像你为你的项目设想的。这里有一个使用的例子：http://getbootstrap.com/css/#forms

来源

2016-07-29 20:45:43

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

你不能在输入控制之前或之后使用。所以序，以实现最终的结果，你需要有一个div（使它inline-block的）来包装输入控制并使用CSS“后”来定位“*”

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

来源

2016-07-29 20:55:56

如果您有Glyphicons一起使用bootsrap3，你可以试试这个：

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

来源

2018-01-29 23:40:11

输入字段内必需的星号

回答

相关问题