Sitemap / Advertise

Information



Tags



Share

How to code a form confirmation message in plain CSS without JS

Advertisement:


read_later

Read Later

Keywords



Keywords



read_later

Read Later

Information

Tags

Share





Advertisement

Advertisement


Banggood
Banggood


Definition

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)

Code

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

Congratulations! You have activated the form...

References

(1) https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown

(2) https://developer.mozilla.org/en-US/docs/Web/CSS/:not