Scribd
Upload
37 views

Lecture 5

The document describes how to style HTML form elements like text inputs, textareas, select menus and buttons using CSS. It provides examples of styling the width, padding, borders, background colors and hovers states of inputs. It also shows how to add icons to inputs and animate the width on focus. Styles are applied using CSS selectors like input[type], textarea, select and :focus.

Uploaded by

Ssip Consultation
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
37 views

Lecture 5

The document describes how to style HTML form elements like text inputs, textareas, select menus and buttons using CSS. It provides examples of styling the width, padding, borders, background colors and hovers states of inputs. It also shows how to add icons to inputs and animate the width on focus. Styles are applied using CSS selectors like input[type], textarea, select and :focus.

Uploaded by

Ssip Consultation
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 23

CSS 

Forms
<!DOCTYPE html>

<html>

<style>

input[type=text], select {

width: 100%;

padding: 12px 20px;

margin: 8px 0;

display: inline-block;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

input[type=submit] {

width: 100%;

background-color: #4CAF50;

color: white;

padding: 14px 20px;

margin: 8px 0;

border: none;

border-radius: 4px;

cursor: pointer;

input[type=submit]:hover {

background-color: #45a049;
}

div {

border-radius: 5px;

background-color: #f2f2f2;

padding: 20px;

</style>

<body>

<h3>Using CSS to style an HTML Form</h3>

<div>

<form action="/action_page.php">

<label for="fname">First Name</label>

<input type="text" id="fname" name="firstname" placeholder="Your name..">

<label for="lname">Last Name</label>

<input type="text" id="lname" name="lastname" placeholder="Your last name..">

<label for="country">Country</label>

<select id="country" name="country">

<option value="australia">Australia</option>

<option value="canada">Canada</option>

<option value="usa">USA</option>

</select>

<input type="submit" value="Submit">

</form>
</div>

</body>

</html>

Styling Input Fields


Use the width property to determine the width of the input field:

First Name 

Example
input {
  width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 100%;
}
</style>
</head>
<body>

<p>A full-width input field:</p>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
</form>

</body>
</html>

The example above applies to all <input> elements. If you only want to style a
specific input type, you can use attribute selectors:

 input[type=text] - will only select text fields


 input[type=password] - will only select password fields
 input[type=number] - will only select number fields
 etc..

ADVERTISEMENT

Padded Inputs
Use the padding property to add space inside the text field.

Tip: When you have many inputs after each other, you might also want to add
some margin, to add more space outside of them:

First Name   Last Name 

Example
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
</style>
</head>
<body>

<p>Padded text fields:</p>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>

</body>
</html>

Note that we have set the box-sizing property to border-box. This makes sure that
the padding and eventually borders are included in the total width and height of
the elements.
Read more about the box-sizing property in our CSS Box Sizing chapter.
Bordered Inputs
Use the border property to change the border size and color, and use the border-
radius property to add rounded corners:

First Name 

Example
input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
}
</style>
</head>
<body>

<p>Text fields with borders:</p>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>

</body>
</html>

If you only want a bottom border, use the border-bottom property:

First Name 

Example
input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

Colored Inputs
Use the background-color property to add a background color to the input, and
the color property to change the text color:

John

Example
input[type=text] {
  background-color: #3CBC8D;
  color: white;
}
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
background-color: #3CBC8D;
color: white;
}
</style>
</head>
<body>

<p>Colored text fields:</p>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>
Focused Inputs
By default, some browsers will add a blue outline around the input when it gets
focus (clicked on). You can remove this behavior by adding outline: none; to the
input.

Use the :focus selector to do something with the input field when it gets focus:

Example
input[type=text]:focus {
  background-color: lightblue;
}
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #555;
outline: none;
}

input[type=text]:focus {
background-color: lightblue;
}
</style>
</head>
<body>

<p>In this example, we use the :focus selector to add a background color
to the text field when it gets focused (clicked on):</p>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>

Example
input[type=text]:focus {
  border: 3px solid #555;
}
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}

input[type=text]:focus {
border: 3px solid #555;
}
</style>
</head>
<body>

<p>In this example, we use the :focus selector to add a black border
color to the text field when it gets focused (clicked on):</p>
<p>Note that we have added the CSS transition property to animate the
border color (takes 0.5 seconds to change the color on focus).</p>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>
Input with icon/image
If you want an icon inside the input, use the background-image property and
position it with the background-position property. Also notice that we add a large
left padding to reserve the space of the icon:

Example
input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<p>Input with icon:</p>

<form>
<input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

Animated Search Input


In this example we use the CSS transition property to animate the width of the
search input when it gets focus. You will learn more about
the transition property later.

Example
input[type=text] {
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>

<p>Animated search input:</p>

<form>
<input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

Styling Text areas


Tip: Use the resize property to prevent text areas from being resized (disable
the "grabber" in the bottom right corner):

Example
textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}
<!DOCTYPE html>
<html>
<head>
<style>
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
</style>
</head>
<body>

<p><strong>Tip:</strong> Use the resize property to prevent textareas


from being resized (disable the "grabber" in the bottom right
corner):</p>

<form>
<textarea>Some text...</textarea>
</form>

</body>
</html>

Styling Select Menus


             

Example
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
<style>
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
</style>
</head>
<body>

<p>A styled select menu.</p>

<form>
<select id="country" name="country">
<option value="au">Australia</option>
<option value="ca">Canada</option>
<option value="usa">USA</option>
</select>
</form>

</body>
</html>
Styling Input Buttons
 

Example
input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

/* Tip: use width: 100% for full-width buttons */

<!DOCTYPE html>
<html>
<head>
<style>
input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<p>Styled input buttons.</p>

<input type="button" value="Button">


<input type="reset" value="Reset">
<input type="submit" value="Submit">

</body>
</html>

For more information about how to style buttons with CSS, read our CSS
Buttons Tutorial.

Responsive Form
Resize the browser window to see the effect. When the screen is less than
600px wide, make the two columns stack on top of each other instead of next
to each other.

<!DOCTYPE html>

<html>

<head>

<style>

*{

box-sizing: border-box;

input[type=text], select, textarea {

width: 100%;

padding: 12px;
border: 1px solid #ccc;

border-radius: 4px;

resize: vertical;

label {

padding: 12px 12px 12px 0;

display: inline-block;

input[type=submit] {

background-color: #4CAF50;

color: white;

padding: 12px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

float: right;

input[type=submit]:hover {

background-color: #45a049;

.container {

border-radius: 5px;

background-color: #f2f2f2;

padding: 20px;

}
.col-25 {

float: left;

width: 25%;

margin-top: 6px;

.col-75 {

float: left;

width: 75%;

margin-top: 6px;

/* Clear floats after the columns */

.row:after {

content: "";

display: table;

clear: both;

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of
each other instead of next to each other */

@media screen and (max-width: 600px) {

.col-25, .col-75, input[type=submit] {

width: 100%;

margin-top: 0;

</style>
</head>

<body>

<h2>Responsive Form</h2>

<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the
two columns stack on top of each other instead of next to each other.</p>

<div class="container">

<form action="/action_page.php">

<div class="row">

<div class="col-25">

<label for="fname">First Name</label>

</div>

<div class="col-75">

<input type="text" id="fname" name="firstname" placeholder="Your name..">

</div>

</div>

<div class="row">

<div class="col-25">

<label for="lname">Last Name</label>

</div>

<div class="col-75">

<input type="text" id="lname" name="lastname" placeholder="Your last name..">

</div>

</div>

<div class="row">

<div class="col-25">

<label for="country">Country</label>

</div>
<div class="col-75">

<select id="country" name="country">

<option value="australia">Australia</option>

<option value="canada">Canada</option>

<option value="usa">USA</option>

</select>

</div>

</div>

<div class="row">

<div class="col-25">

<label for="subject">Subject</label>

</div>

<div class="col-75">

<textarea id="subject" name="subject" placeholder="Write something.."


style="height:200px"></textarea>

</div>

</div>

<div class="row">

<input type="submit" value="Submit">

</div>

</form>

</div>

</body>

</html>

You might also like