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 |
Knockout Competition Draw Generator | 22,359 Kb |
Youtube-like loading bar with pure CSS | 4,195 Kb |
Viewport Media Query SASS example | 2,580 Kb |
Cross Browser Placeholders | 3,761 Kb |
Responsive scrolling text | 2,259 Kb |
Radio status lights with gradients | 4,501 Kb |
Form fields styled for cross browser | 6,351 Kb |
Viewport Media Query example 1 | 2,029 Kb |
Vertically Align text | 1,872 Kb |
Interactive Star Rating for forms | 3,705 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 |
Lunar eclipse | Ademilter | 2,056 Kb |
Dice | Fraina | 5,026 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
SVG Animation | Thepheer | 4,793 Kb |
Guage | Roygwells | 5,653 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
Exploring css spinners | Akagr | 3,569 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
CSS Tooltips | Darylldoyle | 2,599 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!