How do I add a red asterisk in the placeholder? - html

Question

I was building a form with questions in the placeholder.
Now I want a red asterisk for the required fields.
Normally we could use span for giving different styles to the asterisk, but in my case, I can't add span in the placeholder.
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
height: auto;
margin: 8% auto;
background: #fff;
border-radius: 15px;
position: relative;
padding: 90px 0;
overflow: auto;
}
h2 {
text-align: center;
margin-bottom: 80px;
color: #333;
}
.container form {
width: 280px;
text-align: center;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
form input {
width: 100%;
padding: 10px 5px;
margin: 10px 0;
border: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
::placeholder {
color: #777;
}
.btn-box {
width: 100%;
margin: 30px auto 30px auto;
text-align: center;
}
<div class="container">
<form class="form1">
<h2>Let's Start Building!</h2>
<input type="email" placeholder="E-mail" required>
<div class="btn-box">
<button class="BN" type="button">Next</button>
</div>
</form>
</div>
https://paulund.co.uk/add-required-asterisk-with-css
Is there a way can use this website's method in my code?

Answer 1

This is not ideal, but since you said you can't add elements and didn't mention using JS, I tried a css only solution...again, not an ideal situation. I don't know what happens before or after this page. I added the asterisk using a ::before on the div containing the button and setting it to be position:relative, while the asterisk is set as position:absolute and moved next to the input field. I'm ready for the pitchforks and torches.
/*---------------------------------*/
input[type="email"][required]+.btn-box::before {
content: "*";
color: red;
display: block;
position: absolute;
top: -70px;
left: -10px;
}
input[type="email"][required]+.btn-box {
position: relative;
}
/*---------------------------------*/
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
height: auto;
margin: 8% auto;
background: #fff;
border-radius: 15px;
position: relative;
padding: 90px 0;
overflow: auto;
}
h2 {
text-align: center;
margin-bottom: 80px;
color: #333;
}
.container form {
width: 280px;
text-align: center;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
form input {
width: 100%;
padding: 10px 5px;
margin: 10px 0;
border: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
::placeholder {
color: #777;
}
.btn-box {
width: 100%;
margin: 30px auto 30px auto;
text-align: center;
}
<div class="container">
<form class="form1">
<h2>Let's Start Building!</h2>
<input type="email" placeholder="E-mail" required>
<div class="btn-box">
<button class="BN" type="button">Next</button>
</div>
</form>
</div>

Answer 2

I can probably safely assume the reason why OP (aka Original Poster) won't use a <span> is because <input> has width: 100%. Whenever an display: inline (ie <span>) or inline-block proceeds an element that has width: 100%, that element is forced to occupy the space underneath the preceding element of width: 100%.
Simply decrease the width of the <input> and use a <span>
Demo A is exactly like OP's demo with the exception of the <input> having width: 90% and a <span class='asterisk'>*</span> proceeding it.
Demo B and Demo C are improved versions that:
uses semantic elements like <fieldset> and <legend>.
has some ineffective styles removed.
has the <div class="btn-box"> removed.
has altered margins, padding, text-align, and font-size that are ascetically better IMO.
has the property type='button' removed. See <button> in a <form> section below.
In addition Demo B uses the following to display an asterisk:
A <label> instead of a <span> for semantics's sake.
In addition Demo C uses the following to display an asterisk:
The CSS property ::after is assigned to the <fieldset> element instead of actually using an extra element like a <label> or <span> used in the previous demos.
Note: In all demos a special character was used for the actual asterisk called "combining asterisk above". This character appears at the top of the line much like a super-scripted character.
Also Note: The font-sizes are absolute values (px😬) which I would not normally use but the OP's demo is not responsive.
<button> in a <form>
A <button> within a <form> has inherit behavior when the user clicks it, the <form> will validate according to whatever applicable instructions are set within the HTML or JavaScript then if everything is proper it submits the data. If a <button> has type="button", that <button> doesn't do anything without JavaScript which means the HTML property required is limited to validating user input by showing a message when <input> is hovered on.
In Demo B and Demo C the <button> does not have type="button". Enter something that is not an email address and compare the behavior to Demo A. When a valid e-mail address is entered in Demo B or Demo C, the entered data disappears which means it was submitted (of course it doesn't have any JavaScript so it just submits to nowhere).
Demo A
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
height: auto;
margin: 8% auto;
background: #fff;
border-radius: 15px;
position: relative;
padding: 90px 0;
overflow: auto;
}
h2 {
text-align: center;
margin-bottom: 80px;
color: #333;
}
.container form {
width: 280px;
text-align: center;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
form input {
width: 90%;
padding: 10px 5px;
margin: 10px 0;
border: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
.asterisk {
font-size: 3ch;
color: red;
}
::placeholder {
color: #777;
}
.btn-box {
width: 100%;
margin: 30px auto 30px auto;
text-align: center;
}
<div class="container">
<form class="form1">
<h2>Let's Start Building!</h2>
<input type="email" placeholder="E-mail" required>
<span class='asterisk'>⃰</span>
<div class="btn-box">
<button class="BN" type="button">Next</button>
</div>
</form>
</div>
Demo B
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
padding: 90px 0;
margin: 8% auto;
background: #fff;
border-radius: 15px;
}
form {
width: 280px;
margin: 0 auto;
text-align: center;
}
form * {
font-size: 18px;
}
fieldset {
width: 100%;
border: 0;
}
.asterisk {
font-size: 3ch;
color: red;
cursor: help;
}
legend {
font-size: 24px;
font-weight: bold;
margin: 0 auto 20px auto;
color: #333;
}
input {
width: 90%;
padding: 10px 5px;
border: 0;
border-bottom: 1px solid #999;
outline: none;
text-align: center;
}
::placeholder {
text-align: center;
opacity: 0.3;
}
.next {
margin-top: 30px;
padding: 3px 15px;
border-radius: 6px;
cursor: pointer;
}
<section class="container">
<form>
<fieldset>
<legend>Let's Start Building!</legend>
<input type="email" placeholder="E-mail" required>
<label class='asterisk' title=' E-mail is required '>*</label>
</fieldset>
<button class="next">Next</button>
</form>
</section>
Demo C
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
padding: 90px 0;
margin: 8% auto;
background: #fff;
border-radius: 15px;
}
form {
width: 280px;
margin: 0 auto;
text-align: center;
}
form * {
font-size: 18px;
}
fieldset {
width: 100%;
border: 0;
}
.required::after {
content: '*';
font-size: 22px;
color: red;
}
legend {
font-size: 24px;
font-weight: bold;
margin: 0 auto 20px auto;
color: #333;
}
input {
width: 90%;
padding: 10px 5px;
border: 0;
border-bottom: 1px solid #999;
outline: none;
text-align: center;
}
::placeholder {
text-align: center;
opacity: 0.3;
}
.next {
margin-top: 30px;
padding: 3px 15px;
border-radius: 6px;
cursor: pointer;
}
<section class="container">
<form>
<fieldset class='required'>
<legend>Let's Start Building!</legend>
<input type="email" placeholder="E-mail" required>
</fieldset>
<button class="next">Next</button>
</form>
</section>

Answer 3

If it is possible for you to add to your HTML, a label associated with the input would be helpful, see for example MDN
Associating a with an element offers some major advantages:
The label text is not only visually associated with its corresponding
text input; it is programmatically associated with it too. This means
that, for example, a screen reader will read out the label when the
user is focused on the form input, making it easier for an assistive
technology user to understand what data should be entered. You can
click the associated label to focus/activate the input, as well as the
input itself. This increased hit area provides an advantage to anyone
trying to activate the input, including those using a touch-screen
device.
It remains after the placeholder has disappeared so the user is reminded what is needed, and you can format it. For example:
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
height: auto;
margin: 8% auto;
background: #fff;
border-radius: 15px;
position: relative;
padding: 90px 0;
overflow: auto;
}
h2 {
text-align: center;
margin-bottom: 80px;
color: #333;
}
.container form {
width: 280px;
text-align: center;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
form input {
width: 100%;
padding: 10px 5px;
margin: 10px 0;
border: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
label[for="email"]::after {
content: ' (required)';
color: red;
}
input[required] {
border: solid red;
}
::placeholder {
color: #777;
}
.btn-box {
width: 100%;
margin: 30px auto 30px auto;
text-align: center;
}
<div class="container">
<form class="form1">
<h2>Let's Start Building!</h2>
<label for="email">Please type in your email address</label>
<input id="email" type="email" placeholder="E-mail" required>
<div class="btn-box">
<button class="BN" type="button">Next</button>
</div>
</form>
</div>