CSS3FormTriggers

:focus and :checked CSS psudo elements are explored as triggers for css3 transitions. Here we use , :checked, :focus in forms.

by Jacques Surveyer

HTML

<div>
     <h3>Demo of :focus and :checked triggers for CSS3 Transitions with forms</h3>

    <form>First name:
        <input type="text" name="firstname" >
            <nav id='fname'>Please use NO initials</nav>
        <br>Last name:
        <input type="text" name="lastname">
            <nav id='lname'>But do provide complete hyphenated last name. </nav>
        <br>Okay:
        <input type='checkbox'>
            <nav id='okay'>Was the project essentially okay?</nav>
        <br>OnTime?:
        <input type='checkbox'>
            <nav id='ontime'>Was the project delivered ontime?</nav>
        <br>
    </form>
</div>

CSS

nav {display:none;}
input[type="text"] {
    width: 100px;
    background-color:#ffc;
    color: blue;
    font-weight: bold;
    -webkit-transition: width 3s ease;
    -moz-transition: width 3s ease;
    -o-transition: width 3s ease;
    -ms-transition: width 3s ease;
    transition: width 3s ease;
}
input[type="text"]:focus {
    background-color: #dfc;
    color:red;
    width: 150px;
}
input[type="text"]:focus+nav#fname{
   display:block; 
   color:red;  font-size:16px;font-weight:bold;
}
input[type="text"]:focus+nav#lname{
   display:block; 
   color:green; font-size:16px; font-weight:bold;
}
input[type="checkbox"] {
    height: 20px;
    -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    -o-transition: width 1s ease;
    -ms-transition: width 1s ease;
    transition: width 1s ease;
}
input[type="checkbox"]:checked {
    width: 30px;
}
input[type="checkbox"]:focus+nav#okay{
   display:block; 
   color:green; font-size:16px; font-weight:bold;
}
input[type="checkbox"]:focus+nav#ontime{
   display:block; 
   color:green; font-size:16px; font-weight:bold;
}