How can I style html/form elements using CSS?

Question

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

@Drops - Labels are allowed to hold inputs...it's perfectly valid HTML — Paulie_D
– Paulie_D, Commented Feb 24, 2015 at 16:31
@ShermanS Sorry, poor clarification on my behalf. My CSS is in a separate file and I mean I've tried accessing the elements using either .x or #x or #x.y or a combination of them all e.g. for a table further along in my code I use table#header-table td:first-child to access a single cell and for navigation I've used .navbar-default .navbar-nav > li > a ... etc. — hturner
– hturner, Commented Feb 24, 2015 at 16:32
@Drops Not only is it valid, but it also serves a distinct purpose. An input that is a child of a label behaves the same way as an input/label combo using for and id (clicking the label triggers focus or changes the checked state) but without the need of the for and id attributes — Joseph Marikle
– Joseph Marikle, Commented Feb 24, 2015 at 16:34

imelgrat · Accepted Answer · 2015-02-24 16:36:47Z

2

Here's how can you access:

a) the overall form to change the overall style Use #loginform {/* CSS rules */} to address the overall style of the form container. Since there's no other element except the form, it will work as if you were targeting the form itself.

b) the email address title and box use #loginform label {/* CSS rules */} to target the CSS rules at the label and #email{} to target the email input box. You can re-use this last rule for the other items by adding their IDs (e.g. #email, #password {/* CSS rules */})

c) the button Use input[type=submit] {/* CSS rules */} to style the submit button.

answered Feb 24, 2015 at 16:36

imelgrat

2,5971 gold badge14 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akilsree1 · Accepted Answer · 2015-02-24 16:44:37Z

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>

Navin Bista · Accepted Answer · 2015-02-24 16:39:04Z

1

Or instead you can use "class" or "id" to the form,label and input field to provide them individual style.

answered Feb 24, 2015 at 16:39

Navin Bista

2,1282 gold badges22 silver badges38 bronze badges

Comments

J. A. Streich · Accepted Answer · 2015-02-24 16:45:20Z

Wrapping the label around the input is one way to do things (and it is technically valid), the other way is to use the for attribute. The later is typically considered more acceptable to some because it avoids the need for the extra span.

<form id="loginform" action="" method="post">
  <div class="input">
    <label for="username">Username</label>
    <input type="text" name="username" id="username" />
  </div>
  <div class="input">
    <label for="password">Passowrd</label>
    <input type="password" name="password" id="password" />
  </div>
  <input type="submit" value="Log On" class="btn" />
</form>

Would then be styled like:

 .input > label:after /* To place style/content after the label */
 {
   content: ':';
 }

 .input > label /* To target the label */
 {
   display:block; /* Puts the label above the input, just an example */
 }

 .input > input /* The input. */
 {
   background: yellow; /* for instance */
 }

 .input /* The whole input and label pair */
 {
   margin-bottom: 3px; /* Add space bellow each input, or whatever */
 }

Otherwise, nesting the input inside the label removes the need for the for attribute on the label element, and id on input element. So, if we use your HTML:

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

We could style it like this:

#login > label
{
  /* Style for input pair */
  margin-bottom: 3px;
}

#login label > span
{
  /* Style for the label text */
  display:block;
}

#login > label > input
{
  /* Style for the input itself. */
  background: yellow;
}

Sherman Szeto · Accepted Answer · 2015-02-24 16:47:25Z

1

Since you're just starting out and just want to see it working, maybe it would be simpler for you to attach an 'id' attribute to each html element, and then access them in your css that way (for the specifics you want to edit, e.g. email title, email input, submit button).

For example:

html

<input id="submitBtn" type="submit" value="Send" />

css

#submitBtn{ color:black   }

If this doesnt work,

1.) Clear you cache

2.) Make sure your css file is actually included in your html

3.) Make sure each "ID" on the page attached to an element is unique

if that doesnt work, use your dev tools and fiddle around: hit (f12) in any browser

edited Feb 24, 2015 at 16:47

answered Feb 24, 2015 at 16:41

Sherman Szeto

2,4354 gold badges20 silver badges27 bronze badges

Comments

pulamc · Accepted Answer · 2015-02-24 17:01:40Z

-1

First of all I recommend you changing the structure of your code to:

...    
<form id="login" name="login" action="" method="post" accept-charset="utf-8" class="smart-green">    

  <h1>Login Form</h1> 

  <label for="email">Email Address:</label>
  <input id="email" type="text" name="email" placeholder="Enter a valid email address" />

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

  <input type="submit" value="Send" />

</form>

And then the answers are:

a) access to the form

form#login{
...
}

b) the email address title and box

label[for=email]{
}
input[type=email]{
}

c) access the button

input[type=sbumit]{
...
}

edited Feb 24, 2015 at 17:01

answered Feb 24, 2015 at 16:38

pulamc

701 silver badge4 bronze badges

1 Comment

J. A. Streich Over a year ago

You provide no accessibile link between your labels and the input they are for. Either wrap your inputs in your labels or add for attributes to the labels and ids to the inputs.

Collectives™ on Stack Overflow

How can I style html/form elements using CSS?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related