Home » CSS » CSS Input Type Submit Example

About Jenson Jose

Jenson Jose
Jenson currently works as a Lead Developer on various network automation projects, in one of the leading telecom MNCs. In his spare time, he enjoys reading fiction and gaming.

CSS Input Type Submit Example

1. Introduction

When designing a website, one of the key points to consider is how the user is going to interact with it. A good website UI makes it easy for the end user to navigate your website and send information back to you, while maintaining a beautiful visual experience at the same time. CSS plays an important role in website UI design.
 
 
 
 
 
 

 
The HTML form is a vital interface between the user and your website in collecting user information. While it is easy to create a generic form in simple HTML, it looks really plain and boring if not styled. Luckily, the look and feel of each visual element of the form, can be modified to suit your preference or according to the overall theme of the website.

Let’s look into the details of styling the input fields of an HTML form, specifically, the submit field.

2. Types of form input fields

Before we go into how we can style them, let’s take a quick look at the list of all available standard HTML form input fields. Note that these can be set by using the type attribute of the input tag:

  • text
  • password
  • radio
  • checkbox
  • button
  • reset
  • submit

HTML5 introduced the following additional input types:

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Now that we know what input fields are available to us, let’s look at how we can apply styles on them.

3. Style a form input field using CSS

As the name suggests, the CSS input selector can be used to define the style for your form input fields. Let’s start by creating a simple form. Create an HTML file and name it form.html. Copy and paste the below contents into it:

form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Input Type Submit Example</title>
</head>
<body>
<form name="form_user_details">
    Full name:<br />
    <input type="text" name="user_name" /><br /><br />
    Email:<br />
    <input type="email" name="user_email" /><br /><br />
    <input type="reset" value="Reset" />
    <input type="submit" value="Submit" />
</form>
</body>
</html>

Notice that there is no stylesheet associated with the HTML page yet. Save the file and open it in your web browser. Here’s how it should be looking like:

Fig. 1: Simple HTML form with input fields

Fig. 1: Simple HTML form with input fields

Let’s go ahead and create a new stylesheet. Create a new file, name it style.css and place it in the same directory as form.html. Paste the below code into it:

style.css

input {
    height: 30px;
    width: 100px;
}

Now, let’s attach the stylesheet to the HTML page we created earlier. Open form.html and paste the below line of code, just after the closing </title> tag. The full code in your form.html file should look like below. Notice the newly added stylesheet line:

form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Input Type Submit Example</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<form name="form_user_details">
    Full name:<br />
    <input type="text" name="user_name" /><br /><br />
    Email:<br />
    <input type="email" name="user_email" /><br /><br />
    <input type="reset" value="Reset" />
    <input type="submit" value="Submit" />
</form>
</body>
</html>

In the above example, we specified the height and width properties within the stylesheet. However, what we didn’t specify is which input field should be modified with the given values. Hence, in this case, the height and width of all form input fields will be modified.

Here is how our page should look like in a web browser now, with the modified styles:

Fig. 2: CSS styled input fields

Fig. 2: CSS styled input fields

But what if we want to style only a specific field? Let’s see how, with an example of styling the submit field.

4. Style the submit input field

Recall that the submit field is a sub type of the form input field. To be specific, it is an attribute of the form input tag itself. Hence, to style the same, we need to make use of attribute selectors in Cascading Style-Sheets.

Open the stylesheet file style.css, which we had previously created, and append the below highlighted code to modify the style for the submit field. Your stylesheet should look like this:

style.css

input {
    height: 30px;
    width: 100px;
}

input[type=submit] {
    background-color: #006699;
    text-decoration: none;
}

Save the file and open/reload the previously created form.html in your web browser. Use Ctrl+F5, to clear the browser cache and reload the page, in case the modified styles don’t reflect on the page. It should now look something like this:

Fig. 3: CSS styled submit field

Fig. 3: CSS styled submit field

As you can see, the submit field text is barely visible. This can be easily fixed by modifying the text color with the color property. Here’s the modified code:

style.css

input {
    height: 30px;
    width: 100px;
}

input[type=submit] {
    background-color: #006699;
    color: #FFFFFF;
    text-decoration: none;
}

Save the style.css file and open/reload form.html again in your web browser. Here’s what the submit field should be looking like now:

Fig. 4: CSS styled submit field with modified text color

Fig. 4: CSS styled submit field with modified text color

We have managed to transform our plain and boring submit field into a more visually appealing version. Remember that you can play around with the CSS properties and adapt the style to suit your preferences as much as you want!

5. Download the Source Code

This was an example on styling the submit field of an HTML form.

Download
You can download the full source code of this example here: CSSInputTypeSubmitExample.zip
(0 rating, 0 votes)
You need to be a registered member to rate this.
1 Comment Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
guest reader Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
guest reader
Guest
guest reader

wouldve been nice to use some of the “new” html5 types to see what they can do