{"id":612,"date":"2023-10-08T02:37:22","date_gmt":"2023-10-08T02:37:22","guid":{"rendered":"https:\/\/www.cssportal.com\/blog\/?p=612"},"modified":"2024-02-28T23:24:43","modified_gmt":"2024-02-28T23:24:43","slug":"styling-form-elements-with-css","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/styling-form-elements-with-css\/","title":{"rendered":"Styling Form Elements with CSS"},"content":{"rendered":"<p>Web forms are integral parts of websites \u2014 they&#39;re used for user signups, contact forms, search bars, and more. However, the default styling of form elements can be quite plain. This tutorial will guide you through the process of styling form elements using CSS to create more appealing and interactive forms.<\/p>\n<h3>Creating a Basic Form<\/h3>\n<p>Firstly, let&#39;s create a basic HTML form:<\/p>\n<div class=\"examples\">\n<div class=\"topic\">HTML<\/div>\n<pre><code class=\"language-html\">&lt;form&gt;\r\n  &lt;label for=&quot;name&quot;&gt;Name:&lt;\/label&gt;&lt;br&gt;\r\n  &lt;input type=&quot;text&quot; id=&quot;name&quot; name=&quot;name&quot;&gt;&lt;br&gt;\r\n  &lt;label for=&quot;email&quot;&gt;Email:&lt;\/label&gt;&lt;br&gt;\r\n  &lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot;&gt;&lt;br&gt;\r\n  &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;\r\n&lt;\/form&gt;\r\n<\/code><\/pre>\n<\/div>\n<div class=\"examples\">\n<div class=\"topic\">Result<\/div>\n<form>\n  <label for=\"name\">Name:<\/label><br \/>\n  <input type=\"text\" id=\"name\" name=\"name\"><br \/>\n  <label for=\"email\">Email:<\/label><br \/>\n  <input type=\"email\" id=\"email\" name=\"email\"><br \/>\n  <input type=\"submit\" value=\"Submit\"><br \/>\n<\/form>\n<\/div>\n<p>This form includes two fields: one for the user&#39;s name and one for their email. The <code>label<\/code> element is used to provide a text description for each field, and the <code>input<\/code> element is used to create the actual fields users can type into. The <code>for<\/code> attribute in the <code>label<\/code> element should match the <code>id<\/code> attribute in the corresponding <code>input<\/code> element. Lastly, there&#39;s a submit button that users can click to send the form data.<\/p>\n<h3>Styling the Form with CSS<\/h3>\n<p>Now that we have our form, let&#39;s style it using CSS. <\/p>\n<p>First, let&#39;s give our form some basic styles:<\/p>\n<div class=\"examples\">\n<div class=\"topic\">CSS<\/div>\n<pre><code class=\"language-css\">form {\r\n  width: 300px;\r\n  margin: 0 auto;\r\n  padding: 20px;\r\n  background-color: #f4f4f4;\r\n  border: 1px solid #e5e5e5;\r\n  border-radius: 5px;\r\n}\r\n<\/code><\/pre>\n<\/div>\n<div class=\"examples\">\n<div class=\"topic\">Result<\/div>\n<style>\n.form {\n  width: 300px;\n  margin: 0 auto;\n  padding: 20px;\n  background-color: #f4f4f4;\n  border: 1px solid #e5e5e5;\n  border-radius: 5px;\n}\n<\/style>\n<form class=\"form\">\n  <label for=\"name\">Name:<\/label><br \/>\n  <input type=\"text\" id=\"name\" name=\"name\"><br \/>\n  <label for=\"email\">Email:<\/label><br \/>\n  <input type=\"email\" id=\"email\" name=\"email\"><br \/>\n  <input type=\"submit\" value=\"Submit\"><br \/>\n<\/form>\n<\/div>\n<p>These styles center the form on the page, give it some padding, and apply a background color and a border. The <code>border-radius<\/code> property is used to round the corners of the form.<\/p>\n<p>Now let&#39;s style the text fields:<\/p>\n<div class=\"examples\">\n<div class=\"topic\">CSS<\/div>\n<pre><code class=\"language-css\">input[type=&quot;text&quot;], input[type=&quot;email&quot;] {\r\n  width: 100%;\r\n  padding: 10px;\r\n  margin: 5px 0 15px 0;\r\n  border: 1px solid #ccc;\r\n  border-radius: 3px;\r\n}\r\n<\/code><\/pre>\n<\/div>\n<div class=\"examples\">\n<div class=\"topic\">Result<\/div>\n<style>\n.form1 {\n  width: 300px;\n  margin: 0 auto;\n  padding: 20px;\n  background-color: #f4f4f4;\n  border: 1px solid #e5e5e5;\n  border-radius: 5px;\n}\n.form1 input[type=\"text\"], .form1 input[type=\"email\"] {\n  width: 100%;\n  padding: 10px;\n  margin: 5px 0 15px 0;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n}\n<\/style>\n<form class=\"form1\">\n  <label for=\"name\">Name:<\/label><br \/>\n  <input type=\"text\" id=\"name\" name=\"name\"><br \/>\n  <label for=\"email\">Email:<\/label><br \/>\n  <input type=\"email\" id=\"email\" name=\"email\"><br \/>\n  <input type=\"submit\" value=\"Submit\"><br \/>\n<\/form>\n<\/div>\n<p>This CSS rule selects all <code>input<\/code> elements with a <code>type<\/code> of &quot;text&quot; or &quot;email&quot;. It makes them take up the full width of the form, gives them some padding and margin, and applies a border. The <code>border-radius<\/code> property is again used to round the corners.<\/p>\n<p>Lastly, we&#39;ll style the submit button:<\/p>\n<div class=\"examples\">\n<div class=\"topic\">CSS<\/div>\n<pre><code class=\"language-css\">input[type=&quot;submit&quot;] {\r\n  width: 100%;\r\n  padding: 10px;\r\n  color: white;\r\n  background-color: #007BFF;\r\n  border: none;\r\n  border-radius: 3px;\r\n  cursor: pointer;\r\n}\r\n<\/code><\/pre>\n<\/div>\n<div class=\"examples\">\n<div class=\"topic\">Result<\/div>\n<style>\n.form2 {\n  width: 300px;\n  margin: 0 auto;\n  padding: 20px;\n  background-color: #f4f4f4;\n  border: 1px solid #e5e5e5;\n  border-radius: 5px;\n}\n.form2 input[type=\"text\"], .form2 input[type=\"email\"] {\n  width: 100%;\n  padding: 10px;\n  margin: 5px 0 15px 0;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n}\n.form2 input[type=\"submit\"] {\n  width: 100%;\n  padding: 10px;\n  color: white;\n  background-color: #007BFF;\n  border: none;\n  border-radius: 3px;\n  cursor: pointer;\n}\n<\/style>\n<form class=\"form2\">\n  <label for=\"name\">Name:<\/label><br \/>\n  <input type=\"text\" id=\"name\" name=\"name\"><br \/>\n  <label for=\"email\">Email:<\/label><br \/>\n  <input type=\"email\" id=\"email\" name=\"email\"><br \/>\n  <input type=\"submit\" value=\"Submit\"><br \/>\n<\/form>\n<\/div>\n<p>This rule selects the <code>input<\/code> element with a <code>type<\/code> of &quot;submit&quot;. It makes the button take up the full width of the form, gives it some padding, and applies a background color. The <code>border<\/code> property is set to &quot;none&quot; to remove the default border, and the <code>cursor<\/code> property is set to &quot;pointer&quot; to change the mouse cursor to a hand icon when hovering over the button.<\/p>\n<h3>Adding Interactivity with CSS<\/h3>\n<p>To make our form more interactive, we can use CSS to change the appearance of form elements when users interact with them. <\/p>\n<p>For example, we can change the background color of text fields when they&#39;re focused (i.e., when the user is typing in them):<\/p>\n<div class=\"examples\">\n<div class=\"topic\">CSS<\/div>\n<pre><code class=\"language-css\">input[type=&quot;text&quot;]:focus, input[type=&quot;email&quot;]:focus {\r\n  background-color: #e6edf7;\r\n}\r\n<\/code><\/pre>\n<\/div>\n<div class=\"examples\">\n<div class=\"topic\">Result<\/div>\n<style>\n.form3 {\n  width: 300px;\n  margin: 0 auto;\n  padding: 20px;\n  background-color: #f4f4f4;\n  border: 1px solid #e5e5e5;\n  border-radius: 5px;\n}\n.form3 input[type=\"text\"], .form3 input[type=\"email\"] {\n  width: 100%;\n  padding: 10px;\n  margin: 5px 0 15px 0;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n}\n.form3 input[type=\"submit\"] {\n  width: 100%;\n  padding: 10px;\n  color: white;\n  background-color: #007BFF;\n  border: none;\n  border-radius: 3px;\n  cursor: pointer;\n}\n.form3 input[type=\"text\"]:focus, .form3 input[type=\"email\"]:focus {\n  background-color: #e6edf7;\n}\n<\/style>\n<form class=\"form3\">\n  <label for=\"name\">Name:<\/label><br \/>\n  <input type=\"text\" id=\"name\" name=\"name\"><br \/>\n  <label for=\"email\">Email:<\/label><br \/>\n  <input type=\"email\" id=\"email\" name=\"email\"><br \/>\n  <input type=\"submit\" value=\"Submit\"><br \/>\n<\/form>\n<\/div>\n<p>We can also change the background color of the submit button when it&#39;s hovered over:<\/p>\n<div class=\"examples\">\n<div class=\"topic\">CSS<\/div>\n<pre><code class=\"language-css\">input[type=&quot;submit&quot;]:hover {\r\n  background-color: #0056b3;\r\n}\r\n<\/code><\/pre>\n<\/div>\n<div class=\"examples\">\n<div class=\"topic\">Result<\/div>\n<style>\n.form4 {\n  width: 300px;\n  margin: 0 auto;\n  padding: 20px;\n  background-color: #f4f4f4;\n  border: 1px solid #e5e5e5;\n  border-radius: 5px;\n}\n.form4 input[type=\"text\"], .form4 input[type=\"email\"] {\n  width: 100%;\n  padding: 10px;\n  margin: 5px 0 15px 0;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n}\n.form4 input[type=\"submit\"] {\n  width: 100%;\n  padding: 10px;\n  color: white;\n  background-color: #007BFF;\n  border: none;\n  border-radius: 3px;\n  cursor: pointer;\n}\n.form4 input[type=\"text\"]:focus, .form4 input[type=\"email\"]:focus {\n  background-color: #e6edf7;\n}\n.form4 input[type=\"submit\"]:hover {\n  background-color: #0056b3;\n}\n<\/style>\n<form class=\"form4\">\n  <label for=\"name\">Name:<\/label><br \/>\n  <input type=\"text\" id=\"name\" name=\"name\"><br \/>\n  <label for=\"email\">Email:<\/label><br \/>\n  <input type=\"email\" id=\"email\" name=\"email\"><br \/>\n  <input type=\"submit\" value=\"Submit\"><br \/>\n<\/form>\n<\/div>\n<h3>Conclusion<\/h3>\n<p>With the techniques described in this tutorial, you can style form elements in your web pages to be more visually appealing and interactive. Remember that these are just basic examples \u2014 with CSS, the possibilities are endless. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web forms are integral parts of websites \u2014 they&#39;re used for user signups, contact forms, search bars, and more. However, the default styling of form elements can be quite plain. This tutorial will guide you through the process of styling form elements using CSS to create more appealing and interactive forms. Creating a Basic Form [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":639,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-612","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=612"}],"version-history":[{"count":1,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/612\/revisions"}],"predecessor-version":[{"id":615,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/612\/revisions\/615"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media\/639"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}