Glowing Blue Inputs

Developer
Chris Coyier
Size
2,475 Kb
Views
40,480
  1. Glowing Blue Inputs Previews
  2. Glowing Blue Inputs HTML Codes
  3. Glowing Blue Inputs CSS Codes

How do I make an glowing blue inputs?

Ala Twitter. What is a glowing blue inputs? How do you make a glowing blue inputs? This script and codes were developed by Chris Coyier on 04 July 2022, Monday.

Glowing Blue Inputs Previews
IQ Test

Glowing Blue Inputs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Glowing Blue Inputs</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ input[type=text], textarea { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s 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 { -moz-box-shadow: 0 0 5px #51cbee; -webkit-box-shadow: 0 0 5px #51cbee; box-shadow: 0 0 5px #51cbee; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #51cbee;
}
label { width: 150px; float: left;
}
body { padding: 20px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <form action="#" method="post"> <div> <label for="name">Text Input</label> <input type="text" name="name" id="name" value="" tabindex="1" /> </div> <div> <label for="textarea">Textarea</label> <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> </div>
</form> ​ <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Glowing Blue Inputs - Script Codes CSS Codes

input[type=text], textarea { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s 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 { -moz-box-shadow: 0 0 5px #51cbee; -webkit-box-shadow: 0 0 5px #51cbee; box-shadow: 0 0 5px #51cbee; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #51cbee;
}
label { width: 150px; float: left;
}
body { padding: 20px;
}
Glowing Blue Inputs - Script Codes
Glowing Blue Inputs - Script Codes
Home Page Home
Developer Chris Coyier
Username chriscoyier
Uploaded July 04, 2022
Rating 4.5
Size 2,475 Kb
Views 40,480
Do you need developer help for Glowing Blue Inputs?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Coyier (chriscoyier) Script Codes
Name
Simple Responsive Form
Infinite Slideshow
Starting a React-Powered Comment Form
SVG Filters on HTML5 Video
Slider like Yahoo Weather App
CssPanelMenu
Barberpole Hover Animation
Automatic Table of Contents
Centering in the Unknown
Chriscoyier
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!