hide form with css3 and show default div.


Tags: html5,css3

Problem :

I only can use html5 and css3. I have a form and I need simulate "send form data". After click in submit button I need to hide the form and show some default div (#result). How can I do this (only css3 and html5, no javascript).

Thanks.

This is my HTML + CSS code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS CHALLENGE</title>
    <style>
        @import url(http://fonts.googleapis.com/css?family=Raleway:400 "Raleway");
        @import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
        .global {
            background-color: #353535;
            font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
        }

        .backgound {
            background-color: whitesmoke;
            height: 530px;
            width: 400px;
            margin:0 auto 0 auto;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
        }

        #loginForm {
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            font-family: Raleway;
            font-size: 20px;
            font-style: normal;
            font-variant: small-caps;
            font-weight: 200;
            line-height: 26.4px;
        }

		.header {
			margin-left: 40px;
        }

		#triangle {
			width: 0;
			height: 0;
			border-left: 12px solid transparent;
			border-right: 12px solid transparent;
			border-top: 12px solid cornflowerblue;
			margin-top: 29px;
			left: 54px;
			position: relative;
		}

		#loginForm h2 {
            background: cornflowerblue;
            color: white;
            height: 55px;
            font-size: 2.5em;
            padding-top: 10%;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            font-family: Raleway;
            font-size: 39px;
            font-style: normal;
            font-variant: small-caps;
            font-weight: 200;
            line-height: 26.4px;
        }

        .item {
            display: -webkit-box;
            height: 30px;
            width: 300px;
            margin: 0 auto 15px;
            background-color: white;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
        }

        #idMessage  {
            height: 160px;
        }

        #loginForm button{
            opacity: 0.5;
            transition:opacity .3s;
            -webkit-transition:opacity .3s;
            background-color: darkolivegreen;
            width: 308px;
            height: 60px;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            font-size: 2em;
        }

        #loginForm:valid button {
            opacity: 1;
        }

        #result {
            display: none;
        }

        #result:target {
            display:block;
        }

        .myLoad {
            position: relative;
        }

        .myLoad i {
            position: absolute;
            top: 8px;
            left: 325px;
        }

#val {
    display: none;
}
.#idEmail:invalid #val {
        display: block;
}

input:invalid .val {
    display: block;
}

#idEmail:invalid, #idMessage:invalid{
    color: red;
}

#idEmail:valid, #idMessage:valid{
    color: green;
}


/* fa-spin*/
    </style>
</head>
<body class="global">
<div class="backgound">
    <form id="loginForm" action="#result" method="get">
        <h2>
			<span class="header">Contact Us!</span>
			<div id="triangle"></div>
		</h2>
        <div class="myLoad">
            <input class="item" id="idEmail" type="email"
                placeholder="Email" required>
            <i id="inval" class="fa fa-refresh"></i>
            <i id="val" class="fa fa-refresh fa-spin"></i>
        </input>
        </div>
            <div class="myLoad">
            <input class="item" id="idSubject" type="text"
                placeholder="Subject">
            <i class="fa fa-refresh"></i>
        </div>
        <div class="myLoad">
            <textarea class="item" id="idMessage" placeholder="Message"
                rows="10" cols="40" required></textarea>
            <i class="fa fa-refresh"></i>
        </div>
        <button class="item" type="submit">Send</button>
    </form>
    <div id="result" class="sended">Form sended</div>
</div>
</body>
</html>



Solution :

I think you're on the right track using the :target pseudo-class. However, you need to switch the order of the result div and the form, and then combine it with a general sibling selector, see my example here.

(Using the button to submit the form doesnt quite seem to work, but I think that's because the iframing, hopefully it should work for you. Try clicking the test link on jsfiddle to navigate to #result.)


    CSS Howto..

    How to change drop-down menu to drop-up menu

    How can I vertically center text in a ul navigation-bar without these multiple CSS conflicts?

    How to correctly style drop-down menu

    How to select an element and its first child without repetition in CSS?

    How to make the page to fit screen width on mobile device?

    Angularjs hide and show according to screen size responsive

    How do I make the background fit the full size of the screen no matter what size the monitor is?

    How do I stop this div's width from decreasing?

    how to make div fixed at a particular scroll level

    jquery style sheet switcher - how to effect only theme css?

    How to set froala to calc height using css

    How can a html table highlight columns by changing the border on hover?

    CSS: How to float 3 divs side by side for width:100% without messing up?

    How to tell if text is overflowing in a table cell in Firefox?

    CSS question: how to remove the border from an image in WordPress

    How to use not css selector with * in stylesheet

    How to apply only one css file out of two css files included?

    How to make a different background for each link from a navbar? [closed]

    CSS/HTML How to align these elements for a mobile view?

    How would you vertically justify text with css/Javascript?

    How to create and style dropdown menus using the wordpress menus section? [closed]

    How do I add an image to a progress bar in HTML/CSS?

    How can I override inline styles with external CSS?

    How to make carousel have a max width, and load without resize

    How do you center a line-wrapped

    How to make a jQuery step animation?

    Fluid image using percentage: how do I make the correct approach?

    How do I make a horizontal sitemap using UL?

    How to include google search result in my specified div width and height?

    How To Do Multiple Hover On List