Advertisement:
Read Later
In this tutorial, I will show you a CSS trick with which you can create a notification message when the user enters new information in an input element without needing to use JS or a framework.
To better comprehend this trick, we need to understand how to use the :placeholder-shown() and :not() CSS pseudo-selectors.
Syntax:
The :placeholder-shown CSS pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text(1).
The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.(2)
The :not() pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a pseudo-element.(2)
- Create the notification message template, including the submit button, using a div element.
- Define its opacity as '0' by default.
- When the user enters a new variable, reveal the notification message and the submit button using the :placeholder-shown and :not CSS pseudo-selectors to change the opacity of the notification message from '0' to '1'.
- Do not forget to add the adjacent sibling selector (+) before the notify class to style the notification message when the user enters a new variable.
------------------- CSS --------------------
label{color: white; font-size:20px;}
.notify{
opacity: 0;
background-color: lightblue;
width:90%;
margin: auto;
margin-top:20px;
margin-bottom:20px;
padding: 5px;
}
.notify p{
color: #002699;
}
.notify button{
background-color:#002699;
color: white;
font-size: 20px;
border: 2px solid white;
border-radius: 15px;
display: block;
margin:auto;
cursor:pointer;
}
.notify button:hover{
background-color: #1a53ff;
}
input:not(:placeholder-shown) + .notify{
opacity: 1;
}
---------------- HTML ------------------
<form>
<label>Variable: </label><input type="text" name="variable" placeholder="Enter your message here..."></input>
<div class="notify">
<p>Congratulations! You have activated the form...</p>
<button type="submit" name="submit">Submit</button>
</div>
</form>
Result:
(1) https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown
(2) https://developer.mozilla.org/en-US/docs/Web/CSS/:not