{"id":2402,"date":"2017-04-26T19:49:25","date_gmt":"2017-04-26T19:49:25","guid":{"rendered":"http:\/\/cssreset.com\/?p=2402"},"modified":"2017-04-26T19:49:25","modified_gmt":"2017-04-26T19:49:25","slug":"8-cool-css-snippets-for-text-inputs","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/8-cool-css-snippets-for-text-inputs\/","title":{"rendered":"8 Cool CSS Snippets for Text Inputs"},"content":{"rendered":"

Input fields are HTML elements that are there for the user to have a place to input text. Usually they’re part of some sort of form, and usually they’re kind of ignored when it comes to styling. If not totally ignored, they’re typically pretty low maintenance. Maybe a designer will add a cool color or a soft border-radius, but often that’s about it. It’s a shame that they don’t often have a lot of style applied to them, because they’ve got so much potential! If you want to give a little love and flair to your text input fields, take a look at the list of input snippets below for a little inspiration.<\/p>\n

1. Floating Labels Input Field\u00a0<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

The floating labels in this snippet have a very minimalist style, but when they’re focused on, there’s a cool effect where the labels (which might appear as though they’re placeholder text, but they aren’t!) change from grey to blue. When you start typing, they get very small and, using CSS transitions, move smoothly to the top of the input field.<\/p>\n

2. Expanding Text Inputs<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

The input fields in this snippet expand when you click on them. They smoothly expand not only to make more room for the text input, but also to reveal placeholder text, which is a \u00a0nice touch.<\/p>\n

3. Single Input 3D Form<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This very unique input form snippet gives a text input field a 3D effect that is revealed upon hover. The whole effect is very smooth and professional looking. Would be a great addition for anyone looking to add both flair and polish to their projects.<\/p>\n

4. Input Field with Hover Effects\u00a0<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This snippet creates sleek input fields that have beautiful hover effects. When they’re hovered upon, the label smoothly slides to the left to reveal the actual input field where a user can input text.<\/p>\n

5. Input with Focus Animation<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

The input field in this snippet has a smooth CSS animation that occurs when the input field is focused on. The label shifts position, and the pen icon appears and moves back and forth as if it were writing something.<\/p>\n

6. Animated Search Input<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This search input field snippet appears when the magnifying glass icon is clicked on. It includes a nice smooth CSS transition, and an exit icon in case you revealed the search input by mistake.<\/p>\n

7. Stylish Input Boxes\u00a0<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This input field snippet creates super stylish input fields that include smooth CSS transitions that are triggered when the input field is focused on. The transitions give the snippet a nice animated effect.<\/p>\n

8. Fancy Text Inputs<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

These text inputs are super stylish and can be used to add a cool vibe to just about any project with a modern style and sensibility.<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

Input fields are HTML elements that are there for the user to have a place to input text. Usually they’re part of some sort of form, and usually they’re kind of ignored when it comes to styling. If not totally […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2410,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2402"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2402"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2402\/revisions"}],"predecessor-version":[{"id":2411,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2402\/revisions\/2411"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2410"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}