{"id":16791,"date":"2012-04-11T13:55:14","date_gmt":"2012-04-11T20:55:14","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=16791"},"modified":"2013-12-31T09:30:34","modified_gmt":"2013-12-31T16:30:34","slug":"glowing-blue-input-highlights","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/css\/glowing-blue-input-highlights\/","title":{"rendered":"Glowing Blue Input Highlights"},"content":{"rendered":"<p>Like mid-2012 Twitter.<\/p>\n<pre rel=\"CSS\"><code>input[type=text], textarea {\r\n  -webkit-transition: all 0.30s ease-in-out;\r\n  -moz-transition: all 0.30s ease-in-out;\r\n  -ms-transition: all 0.30s ease-in-out;\r\n  -o-transition: all 0.30s ease-in-out;\r\n  outline: none;\r\n  padding: 3px 0px 3px 3px;\r\n  margin: 5px 1px 3px 0px;\r\n  border: 1px solid #DDDDDD;\r\n}\r\n \r\ninput[type=text]:focus, textarea:focus {\r\n  box-shadow: 0 0 5px rgba(81, 203, 238, 1);\r\n  padding: 3px 0px 3px 3px;\r\n  margin: 5px 1px 3px 0px;\r\n  border: 1px solid rgba(81, 203, 238, 1);\r\n}<\/code><\/pre>\n<p data-height=\"319\" style=\"height: 319px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"IgEiz\" data-user=\"chriscoyier\" data-default-tab=\"result\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/IgEiz\" rel=\"noopener\">Glowing Blue Inputs<\/a> by Chris Coyier (<a href=\"http:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Like mid-2012 Twitter. input[type=text], textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #DDDDDD; } input[type=text]:focus, textarea:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); padding: 3px 0px 3px 3px; [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3222,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":16320,"url":"https:\/\/css-tricks.com\/snippets\/css\/corner-ribbon\/","url_meta":{"origin":16791,"position":0},"title":"Corner Ribbon","date":"February 17, 2012","format":false,"excerpt":"NEWS \u200b .wrapper { margin: 50px auto; width: 280px; height: 370px; background: white; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); box-shadow: 0px 0px 8px rgba(0,0,0,0.3); position: relative; z-index: 90; } .ribbon-wrapper-green { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; }\u2026","rel":"","context":"With 58 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9385,"url":"https:\/\/css-tricks.com\/snippets\/css\/two-color-three-dimensional-blocks-and-text\/","url_meta":{"origin":16791,"position":1},"title":"Two-Color Three-Dimensional Blocks and Text","date":"May 11, 2011","format":false,"excerpt":"We can use multiple text-shadow and box-shadow values to create a three-dimensional look to blocks or text, like this screenshot of David DeSandro's footer. However in that example, the \"three dimesional\" part is a solid color. By alternating colors back and forth in the \"stacking order\" of our box or\u2026","rel":"","context":"With 14 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18277,"url":"https:\/\/css-tricks.com\/lodge\/v10\/036-building-search-part-2\/","url_meta":{"origin":16791,"position":2},"title":"#036: Building Search, Part 2","date":"September 13, 2012","format":false,"excerpt":"We pick up where we left off in Video #034 and continue building out the search area. This time we're focusing on the \"open\" state of the search, building the actual form elements themselves. The search field itself uses the HTML5 form element type \"search\" - which usually has some\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3388,"url":"https:\/\/css-tricks.com\/snippets\/css\/css-text-shadow\/","url_meta":{"origin":16791,"position":3},"title":"CSS Text Shadow","date":"August 12, 2009","format":false,"excerpt":"Regular text shadow: p { text-shadow: 1px 1px 1px #000; } Multiple shadows: p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; } The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":154816,"url":"https:\/\/css-tricks.com\/snippets\/css\/custom-file-input-styling-webkitblink\/","url_meta":{"origin":16791,"position":4},"title":"Custom File Input Styling","date":"October 31, 2013","format":false,"excerpt":"If you're interested in Webkit\/Blink\/Chrome specific styling, there is a proprietary pseudo element to hide, and then use an also non-standard psudeo-on-an-input: <input class=\"custom-file-input\" type=\"file\"> .custom-file-input::-webkit-file-upload-button { visibility: hidden; } .custom-file-input::before { content: 'Select some files'; display: inline-block; background: linear-gradient(top, #f9f9f9, #e3e3e3); border: 1px solid #999; border-radius: 3px; padding: 5px\u2026","rel":"","context":"In \"file input\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":346470,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-width\/","url_meta":{"origin":16791,"position":5},"title":"outline-width","date":"August 10, 2021","format":false,"excerpt":"The outline-width CSS property specifies the thickness of an element's outline. What\u2019s an outline? An outline is a line that is drawn around elements \u2014 outside the border edge \u2014 that is used for accessibility or decoration purposes when that element is in focus. button:focus { outline-width: 5px; } We\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/16791"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=16791"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/16791\/revisions"}],"predecessor-version":[{"id":159356,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/16791\/revisions\/159356"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=16791"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=16791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}