Hi guys, Today I am going to share nice tips from one of my popular blogs (codrops). They wrote some interesting post called Enhance required fields in a form.
This will only work as intended in browsers that support the respective CSS properties.
The idea is to allow the user to enhance only the required fields so that he has a notion about what fields are actually required. That’s normally done a little * or similar but we want to go a step further and create a little interactive effect for a better visualisation of required fields.
<form class="af-form" id="af-form" novalidate>
<div class="af-outer">
<div class="af-inner">
<label>Title</label>
<input type="text" name="title">
</div>
</div>
<div class="af-outer af-required">
<div class="af-inner">
<label>Name</label>
<input type="text" name="fullname" required>
</div>
</div>
</form>We’ll add a transition to the outer wrapper, define a fixed height and set the overflow to hidden because we don’t want the content to be visible when we decrease the height:
.af-outer {
overflow: hidden;
height: 70px;
box-shadow: 0 1px 0 #f5f5f5 inset;
transition: all 0.5s linear;
}
.af-inner {
padding: 15px 20px 15px 20px;
transform-origin: center top;
transform: scale(1);
transition: all 0.5s linear;
}</pre>
#af-showreq:checked ~ .af-form .af-outer:not(.af-required) {
height: 0px;
visibility: hidden;
}
#af-showreq:checked ~ .af-form .af-outer:not(.af-required) .af-inner {
transform: scale(0);
opacity: 0;
}
<pre>
For the inner wrapper, we’ll set the transform origin to be “center top” so that we can still see it scaling while we decrease the height of the outer one. Initially the scale is set to 1 (you don’t really have to set that):
At the top of the form we have a little button (a checkbox) with the id af-showreq and when we check that button, we will scale down the optional fields. We can use the :not pseudo class to get to our desired elements but you could of course give classes to the optional fields instead and access them directly with the general sibling combinator.
So, we’ll decrease the height of the outer wrappers and scale down and fade out the inner ones:
Setting visibility to hidden will guarantee that we can tab through the resting fields without passing through the other ones. Here we can’t use display: none because otherwise our transition won’t work.
Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!
Thanks!
