输入字段中必填的星号

Question

Is it possible to put a red asterisk to inside of an input field to the far right? I don't have room on my form to put an asterisk and if I do put them it will look strange. Here is my css for my inputs.

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

Is there any way to accomplish this? Thanks.

Answer 1

Using Bootstrap there is a class called "input-group-addon" that would do what you're talking about. If you aren't using Bootstrap, maybe you could still borrow the css for that class if it looks like what you're envisionng for your project. There's an example of it used here: http://getbootstrap.com/css/#forms

Answer 2

You cannot use a before or after for input control. So inorder to achieve the end result, you need to wrap the input control with a div (make it inline-block) and use css "after" to position the "*"

 #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

If you use bootsrap3 along with Glyphicons, you can try this:

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