Cross Browser Placeholders

Developer
Ash Durham
Size
3,761 Kb
Views
8,096
  1. Cross Browser Placeholders Previews
  2. Cross Browser Placeholders HTML Codes
  3. Cross Browser Placeholders CSS Codes
  4. Cross Browser Placeholders JS Codes

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 Previews
IQ Test

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
Cross Browser Placeholders - Script Codes
Home Page Home
Developer Ash Durham
Username ashdurham
Uploaded January 05, 2023
Rating 3
Size 3,761 Kb
Views 8,096
Do you need developer help for Cross Browser Placeholders?

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!

Ash Durham (ashdurham) Script Codes
Name
Animated Progress Bar
A Pen by Ash Durham
Vertically Align text
Viewport Media Query SASS example
Fade test
Responsive scrolling text
Form fields styled for cross browser
Social Share Button Counter
Dynamic video proportion
Interactive Star Rating for forms
Create amazing blog posts 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!