{"id":4766,"date":"2015-06-05T12:15:40","date_gmt":"2015-06-05T09:15:40","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=4766"},"modified":"2018-01-08T14:38:22","modified_gmt":"2018-01-08T12:38:22","slug":"css-input-type-text-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/","title":{"rendered":"CSS Input Type Text Example"},"content":{"rendered":"

In this example, we’ll have a look at how we can style text inputs.<\/p>\n

Text inputs are very common in websites nowadays like in sign up forms, contact forms, search boxes, survey answers and so on.<\/p>\n

But you notice most of them are not styled, and you can see a bunch of text fields with the same default view accross different pages.<\/p>\n

Well, the input type text<\/code> already has a default\/pre-styled view, but most of the times, you will be willing to change it.<\/p>\n

As always, lets first look at the basics and then some custom stuff.
\n 
\n 
\n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n

1. Prerequisites<\/h2>\n

First, go ahead and create a html file with its basic syntax inside like this:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>CSS3 Text Input Styling Example<\/title>\r\n<\/head>\r\n<body>\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n<!-- HTML SECTION  -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\r\n<\/pre>\n
Set up an input with a type of text, a class of element and optionally a name of city:<\/p>\n
<!-- HTML SECTION  -->\r\n\t\r\n<input type=\"text\" class=\"element\" name=\"city\">\r\n<\/pre>\n
Note that the name will be needed because the text input is going to be used under some form and referred to.<\/p>\n
Look at the default styling of a text input:<\/p>\n
input[type=text] {\r\n  background-color: #ffffff;\r\n  border: 1px solid #cccccc;\r\n  -webkit-border-radius: 3px;\r\n     -moz-border-radius: 3px;\r\n          border-radius: 3px;\r\n  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\r\n     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\r\n          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\r\n  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;\r\n     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;\r\n      -ms-transition: border linear 0.2s, box-shadow linear 0.2s;\r\n       -o-transition: border linear 0.2s, box-shadow linear 0.2s;\r\n          transition: border linear 0.2s, box-shadow linear 0.2s;\r\n}\r\n\r\ninput[type=text]:focus {\r\n  border-color: rgba(82, 168, 236, 0.8);\r\n  outline: 0;\r\n  outline: thin dotted \\9;\r\n  \/* IE6-9 *\/\r\n\r\n  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);\r\n     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);\r\n          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);\r\n}\r\n<\/pre>\n
And the default view of a text input as you might know is:<\/p>\n
\"Text<\/a>
Text Input Default Style<\/figcaption><\/figure>\n
2. Styling a Text Input<\/h2>\n
In this section, we will style the above element with CSS3 to create a better looking input view. Look at the lines below:<\/p>\n
<style type=\"text\/css\">\r\n\r\n.element {\r\n\tfont-family: \"Montserrat\", sans-serif;\t\/* custom font applied *\/\r\n\twidth: 20em;\t\t\t\t\t\t\t\/* custom width *\/\r\n\theight: 3em;\t\t\t\t\t\t\t\/* custom height *\/\r\n\tborder: 0.1em solid #ccc;\t\t\t\t\/* custom border *\/\r\n\tborder-radius: 0.5em;\t\t\t\t\t\/* added border radius *\/\r\n\tbackground-color: #feffdc;\t\t\t\t\/* light yellow background *\/\r\n\tpadding: 0em 1em;\t\t\t\t\t\t\/* right and left padding *\/\r\n}\r\n\r\n<\/style>\r\n\r\n<\/pre>\n
Let’s have a look at what we styled:<\/p>\n
1. Broder – you will probably need a custom border for your input because the default one is really old inset shadow.<\/p>\n
2. Border-Radius – most text inputs on pages have this non-zero radius on their borders, it makes them look better.<\/p>\n
3. Background-Color – you may optionally use a bg color just to emphasize the input field, it is eye catching after all.<\/p>\n
4. Padding – use paddings\u00a0when width and height are changed and the text seems creepy\u00a0starting from the very beginning.<\/p>\n
We’ve pretty much given custom attributes to most of the properties. This would look like this:<\/p>\n
\"Custom<\/a>
Custom Styled Text Input<\/figcaption><\/figure>\n
Now lets see another styling of the input text.<\/p>\n
<style type=\"text\/css\">\r\n\r\n.element {\r\n\tfont-family: \"Montserrat\", sans-serif;\r\n\twidth: 30em;\r\n\theight: 4em;\r\n\tborder: 0.1em solid #ccc;\r\n\tborder-radius: 0.5em;\r\n\tbackground-color: #efefef;\r\n\tpadding: 0em 1em;\r\n\tfont-size: 1.2em;\r\n\tbox-shadow: 0em 0.1em 0.5em #ccc;\r\n}\r\n\r\n<\/style>\r\n<\/pre>\n
In this second example, we did some noticeable changes to the input:<\/p>\n
1. We are having a much larger input box which can be considered as comfortable for full page forms.<\/p>\n
2. We added a box-shadow which gave our inputs a 3D-like view which made it more attractive.<\/p>\n
3. Basically, you can change the bg color to whatever suits your needs according to your page design.<\/p>\n
4. Remember to always use custom fonts and font-sizes to adjust the right properties of the input.<\/p>\n
Have a look at what this looks like in the browser:<\/p>\n
\"Another<\/a>
Another Styling for the Text Input<\/figcaption><\/figure>\n
See how in the second example we added a box-shadow property on the input and that made it look more professional.<\/p>\n
3. Advanced Input Styling<\/h2>\n
Notice that up until now, we have been styling the text input by giving it a class ( element<\/code> ), but what if you want to style<\/p>\n
all text inputs the same way? Well, there is a way. You can select all input type text like this in css: input[type=text]<\/code>.<\/p>\n
First lets add a few more lines create a form like view of the inputs and then apply styling using the selector.<\/p>\n
<!-- HTML SECTION  -->\r\n<h4>Please, fill the form below to continue:<\/h4>\r\n<form class=\"form-group\" method=\"post\">\r\n\t<h4>First Name<\/h4>\r\n\t<input type=\"text\" placeholder=\"First Name\" name=\"first-name\"><br \/>\r\n\t<h4>Last Name<\/h4>\r\n\t<input type=\"text\" placeholder=\"Last Name\" name=\"last-name\"><br \/>\r\n\t<h4>E-Mail<\/h4>\r\n\t<input type=\"text\" placeholder=\"E-Mail Address\" name=\"email\"><br \/>\r\n\t<h4>Country<\/h4>\r\n\t<input type=\"text\" placeholder=\"Country\" name=\"country\"><br \/>\r\n<\/form>\r\n<\/pre>\n
That gave a form view of several inputs. A more intense styling with advanced shadows and inset would be:<\/p>\n
<!-- STYLE  SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\ninput[type=text] {\r\n\tfont-family: \"Open Sans\", sans-serif;\r\n\twidth: 20em;\r\n\theight: 2em;\r\n\tborder: 0.1em solid #ccc;\r\n\tborder-radius: 0.2em;\r\n\tbackground-color: #f9f9f9;\r\n\tpadding: 0em 1em;\r\n\tfont-size: 1em;\r\n\r\n\tborder: 5px solid white; \r\n    -webkit-box-shadow: \r\n      inset 0 0 8px  rgba(0,0,0,0.1),\r\n            0 0 16px rgba(0,0,0,0.1); \r\n    -moz-box-shadow: \r\n      inset 0 0 8px  rgba(0,0,0,0.1),\r\n            0 0 16px rgba(0,0,0,0.1); \r\n    box-shadow: \r\n      inset 0 0 8px  rgba(0,0,0,0.1),\r\n            0 0 16px rgba(0,0,0,0.1); \r\n    padding: 15px;\r\n    background: rgba(255,255,255,0.5);\r\n    margin: 0 0 10px 0;\r\n}\r\n\r\nh4 {\r\n\tmargin-bottom: 0em;\r\n\tpadding-bottom: 0.5em;\r\n\tfont-family: \"Montserrat\";\r\n}\r\n<\/pre>\n
The new, smart styled all inputs would look like this:<\/p>\n
\"Styling<\/a>
Styling all inputs with a type of Text using the CSS Selector<\/figcaption><\/figure>\n
4. Conclusion<\/h2>\n
To conclude, there is a lot to explore while styling inputs of every type, especially text, and it is recommended to giveyour inputs a personalized view and keep a standard style that you create for later uses, just like we did with text inputs.<\/p>\n
The default input view is kinda creepy and old-fashioned, so consider using your own styling when using inputs.<\/p>\n
You could also take advantage of front end frameworks like Bootstrap to have pre styled inputs with nice animated hovers.<\/p>\n
5. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: CSS3 Text Input Styling<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
In this example, we’ll have a look at how we can style text inputs. Text inputs are very common in websites nowadays like in sign up forms, contact forms, search boxes, survey answers and so on. But you notice most of them are not styled, and you can see a bunch of text fields with …<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-4766","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"\nCSS Input Type Text Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, we'll have a look at how we can style text inputs. Text inputs are very common in websites nowadays like in sign up forms, contact forms,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Input Type Text Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, we'll have a look at how we can style text inputs. Text inputs are very common in websites nowadays like in sign up forms, contact forms,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-06-05T09:15:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:38:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Input Type Text Example\",\"datePublished\":\"2015-06-05T09:15:40+00:00\",\"dateModified\":\"2018-01-08T12:38:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/\"},\"wordCount\":694,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/\",\"name\":\"CSS Input Type Text Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-06-05T09:15:40+00:00\",\"dateModified\":\"2018-01-08T12:38:22+00:00\",\"description\":\"In this example, we'll have a look at how we can style text inputs. Text inputs are very common in websites nowadays like in sign up forms, contact forms,\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Input Type Text Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Input Type Text Example - Web Code Geeks - 2026","description":"In this example, we'll have a look at how we can style text inputs. Text inputs are very common in websites nowadays like in sign up forms, contact forms,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Input Type Text Example - Web Code Geeks - 2026","og_description":"In this example, we'll have a look at how we can style text inputs. Text inputs are very common in websites nowadays like in sign up forms, contact forms,","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-06-05T09:15:40+00:00","article_modified_time":"2018-01-08T12:38:22+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Input Type Text Example","datePublished":"2015-06-05T09:15:40+00:00","dateModified":"2018-01-08T12:38:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/"},"wordCount":694,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/","name":"CSS Input Type Text Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-06-05T09:15:40+00:00","dateModified":"2018-01-08T12:38:22+00:00","description":"In this example, we'll have a look at how we can style text inputs. Text inputs are very common in websites nowadays like in sign up forms, contact forms,","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-input-type-text-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Input Type Text Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=4766"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4766\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=4766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=4766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=4766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}