Cross Browser Placeholders
How do I make an cross browser placeholders?
Placeholders are quite popular these days however didn't exist back in the day. Modernizr has gone along way to help the older browsers however, here is a very light weight way to achieve a similar effect. Gives you more control on the styling of the placeholder and the types of transitions you can do between focus and blur if you wanted.. What is a cross browser placeholders? How do you make a cross browser placeholders? This script and codes were developed by Ash Durham on 05 January 2023, Thursday.
Cross Browser Placeholders - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cross Browser Placeholders</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="newsletter"> <h4>SIGN UP TO THE NEWSLETTER</h4> <form> <ul> <li> <label>Name</label> <input type="text" name="name" /> </li> <li> <label>Email</label> <input type="email" name="email" /> </li> <li> <input type="submit" value="SUBMIT" class="btn small" /> </li> </ul> </form>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Cross Browser Placeholders - Script Codes CSS Codes
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
body { font-size: 16px; line-height: 26px; font-family: Helvetica, Helvetica Neue, Arial; color: #445464;
}
#newsletter { background: #a7bbc9; height: 90px; text-align: center;
}
#newsletter h4, #newsletter form, #newsletter ul { display: inline; line-height: 90px;
}
#newsletter form { position: relative; top: -4px; padding-left: 15px;
}
#newsletter li { max-width: 210px; height: 32px; position: relative; display: inline-block; margin: 0 5px;
}
#newsletter li label { display: block; padding: 0 0 0 10px; width: 200px; line-height: 32px; font-size: 12px; color: #a7bbc9; background: #fff; text-align: left;
}
#newsletter li input[type=text], #newsletter li input[type=email] { position: absolute; top: 0; left: 0; display: block; width: 190px; height: 100%; padding: 0 10px; border: none; line-height: 32px; font-size: 16px; background: none; outline: none; font-family: Arial, sans-serif; color: #445464;
}
#newsletter li input[type=text]:focus, #newsletter li input[type=text].filled, #newsletter li input[type=email]:focus, #newsletter li input[type=email].filled { background: #fff;
}
#newsletter li input[type=submit] { display: block; position: relative; border: none; background: #445464; color: #fff; padding: 6px 20px 8px; font-size: 16px; cursor: pointer; -webkit-border-top-left-radius: 10px; -moz-border-top-left-radius: 10px; -ms-border-top-left-radius: 10px; -o-border-top-left-radius: 10px; border-top-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-bottom-right-radius: 10px; -ms-border-bottom-right-radius: 10px; -o-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
}
#newsletter li input[type=submit]:hover { background: #566C81;
}
Cross Browser Placeholders - Script Codes JS Codes
jQuery(document).ready(function($) { $("#newsletter input[type=text], #newsletter input[type=email]").blur(function() { if ($(this).val() !== '') { $(this).addClass('filled'); } else { $(this).removeClass('filled'); } });
});
![Cross Browser Placeholders - Script Codes](http://shots.codepen.io/ashdurham/pen/GpkFg-512.jpg)
Developer | Ash Durham |
Username | ashdurham |
Uploaded | January 05, 2023 |
Rating | 3 |
Size | 3,761 Kb |
Views | 8,096 |
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!
Name | Size |
Viewport Media Query example 2 | 2,224 Kb |
Animated Progress Bar | 5,053 Kb |
Responsive scrolling text | 2,259 Kb |
Fade test | 5,616 Kb |
Interactive Star Rating for forms | 3,705 Kb |
A Pen by Ash Durham | 2,626 Kb |
Viewport Media Query example 1 | 2,029 Kb |
Radio status lights with gradients | 4,501 Kb |
Animated scroll navigation layout | 3,062 Kb |
Dynamic video proportion | 2,430 Kb |
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!
Name | Username | Size |
Side Sliding Menu CSS | EduardL | 4,388 Kb |
Comment Jquery | SquishyAndroid | 2,421 Kb |
UI Challenge - Budget Selector | AgentRR007 | 3,547 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
Toggle Time | Petebot | 5,345 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
TinFoil Boats | Chandralil | 4,577 Kb |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Resume | Rottingroom | 5,483 Kb |
Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!