How can I style html/form elements using CSS?


Tags: html,css

Problem :

I'm trying to create a log in form and my html so far is:

<body id="login">
<div id="wrapper">

<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">    
       <h1>Login Form</h1> 
        <label>
        <span>Email Address:</span>
        <input id="email" type="text" name="email" placeholder="Enter a valid email address" />
        </label>

        <label>
        <span>Password:</span>
        <input id="password" type="password" name="password" placeholder="Password" />
        </label>

        <label>
        <span>&nbsp;</span>
        <input type="submit" value="Send" />
        </label> 
</form>
</div>
</div>

I want to style it using CSS. How can I access:

a) the overall form to change the overall style

b) the email address title and box

c) the button

I have tried using . # > but confused myself now. It's probably a really silly mistake I'm making but I can't figure it out...



Solution :

I solved like this CSS

<style type="text/css">
form{
    text-align: center;  /* To align the form center */
    background-color: orange; /* sets the background-color to orange */
}

#password{ /* If you use class attribute, use .password{} */
        /* to modify this section*/
}

#email{
    width: 200px; /* to size the email bar*/
}

#submit_button{
    color: #fff; /* Text Color*/
    background-color: #5cb85c; /* Background color green*/ 
    border-color: #4cae4c; /* border color light green*/ 
}

</style>

HTML

<div id="wrapper">

<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">    
       <h1>Login Form</h1> 
        <label>
        <span>Email Address:</span>
        <input id="email" type="text" name="email" placeholder="Enter a valid email address" />
        </label>
            <br /><br /><br />
        <label>
        <span>Password:</span>
        <input id="password" type="password" name="password" placeholder="Password" />
        </label>
            <br /><br /><br />

        <label>
        <span>&nbsp;</span>
        <input id="submit_button" type="submit" value="Send" />
        </label> <br /><br /><br />
</form>
</div>
</div> 

    CSS Howto..

    CSS/HTML problem in IE - how to fix?

    How to load specific set css commands only at the first browsing of the web site?

    How to give outer glow effect to column in HTML/CSS?

    Why is there a vertical scrollbar, and how to get rid of it?

    how to create an external javascript and an external css file for date picker and how to use it in eclipse

    Inheriting CSS how do I stop it?

    A CSS question: why is the Facebook Share button often styled as “icon” + text to fake as a button, and how to do it well?

    CSS how to push text away from border

    how to make div fixed at a particular scroll level

    How to handle alternating rows dynamically?

    How to change the background colour of a QWidget inside QStackedWidget using css?

    How hard is it to make an expanding tab in CSS?

    How to put my form on top of an image in css/html?

    How do I make my mobile website auto-adjust its screen resolution?

    How to to select the last class or last of type in css

    How are multiple spaces showing in HTML, without pre, nbsp or white-space: pre?

    how to show an arrow to the only li item that has sub-menu

    angularjs ui-grid changing column height to auto causes weird line to show up on other columns

    Background hover showing in CSS

    Why margin:2.5px does not work? How to solve this problem

    How to align both these elements in same line?

    How can I make my jquery mobile collapsible set larger using css

    JavaScript: How to get a dynamically created element's width?

    How to wrap or label all divs like files in opertaing systems (jQuery) [closed]

    How to make div position fixed without floating

    How to resize the images to have the same height in group while keeping aspect ratio?

    How to scroll to particular element using CSS/JS

    ExtJS - How to customize buttons?

    How do I make current menu item active in asp.net webforms

    How to track element movement and trigger function at specific spot?