An asterisk is compulsory within the input field

Question

An asterisk is compulsory within the input field

Is there a way to place a red asterisk inside an input field on the far right side? My form doesn't have enough space to include an asterisk separately, and inserting it in an unconventional manner would look odd. Below is the CSS I am using for my input fields:

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

Does anyone know of a solution to achieve this? Thank you.

html css required

Answer 1

Answer №1

When working with Bootstrap, you can take advantage of the "input-group-addon" class to achieve the functionality you are describing. If Bootstrap is not being used in your project, consider incorporating the CSS for that class if it aligns with your project's vision. You can find an example of this class being utilized here: http://getbootstrap.com/css/#forms

Answer 2

When working with Bootstrap, you can take advantage of the "input-group-addon" class to achieve the functionality you are describing. If Bootstrap is not being used in your project, consider incorporating the CSS for that class if it aligns with your project's vision. You can find an example of this class being utilized here: http://getbootstrap.com/css/#forms

Answer 3

Answer №2

To prevent using a before or after for input control, the solution is to wrap the input control with a div (set it as inline-block) and utilize css "after" to position the "*"

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

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

Answer 4

To prevent using a before or after for input control, the solution is to wrap the input control with a div (set it as inline-block) and utilize css "after" to position the "*"

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

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

Answer 5

Answer №3

If you want to incorporate Glyphicons into your Bootstrap 3 project, you can follow these steps:

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

Answer 6

If you want to incorporate Glyphicons into your Bootstrap 3 project, you can follow these steps:

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

An asterisk is compulsory within the input field

Answer №1

Answer №2

Answer №3

Similar questions

instead of downloading the file, click on the provided download link to open it directly

html body extends beyond the negative position of the element

Transferring a PHP variable via a URL

Tips for removing CSS and Javascript code from a website's source code

Arrange SVGs using CSS in a grid with offsets

Masterful Text Pairing: Using Zen Coding Techniques for Crafting Intricate Nesting Structures

An error in syntax is being triggered by the Php file being accessed through the <script src="list.php"></script>

Get the HTML code of a webpage that incorporates JavaScript into its design

What is the process for incorporating an additional input in HTML as you write?

What is the process for creating a global variable in JavaScript?

Is there a way to modify the text within a hyperlink using jQuery?

Trouble getting BS4 find_all to recognize the mini_card-title class on Genius Lyrics website

Offering various language options on a website determined by the URL

Emblem pointing towards the header

Notifying individuals of a file's unavailability using HTML tags

Is there a way to ensure that a child mimics the behavior of its parent when adjusting the opacity and visibility properties of both elements?

AngularJS allows a function to return an array value, which can be displayed in separate blocks on

Get rid of the spaces in web scraping <tr> tags using Node.js

"All my online spaces are chaotic and cluttered beyond belief, overflowing with content in high-definition

Exploring Bootstrap navigation bars with customizable fixed content heights