diff --git a/README.md b/README.md index 1dff27d..54397aa 100644 --- a/README.md +++ b/README.md @@ -7,14 +7,11 @@ Reference: https://codepen.io/wesbos/pen/KggoOo Usage: -intallation: -npm install placeholder-shown-polyfill - HTML: - +`` CSS: - +``` input { border: 5px solid red; outline: 0; @@ -23,6 +20,16 @@ input { margin: 50px; } -input:placeholder-shown, input.placeholder-shown { +input:-moz-placeholder { + border-color: green; +} +input:-ms-input-placeholder { + border-color: green; +} +input.placeholder-shown { + border-color: green; +} +input:placeholder-shown { border-color: green; } +``` diff --git a/placeholder-shown-polyfill.min.js b/placeholder-shown-polyfill.min.js new file mode 100644 index 0000000..ebb0ff2 --- /dev/null +++ b/placeholder-shown-polyfill.min.js @@ -0,0 +1,5 @@ +/*! +* Polyfill for pseudo selector :placeholder-shown +* Author: Subash Selvaraj (github userid:sesubash) & enhanced by Kravimir +*/ +(function(){var d=document,u=null,o={init:function(){var p="placeholder",h=d.querySelector("head"),t=d.createElement("input"),s=d.createElement("style"),r="{padding-top:183px}";t.setAttribute("id","PhSTf");t.setAttribute(p,"\x20");s.textContent="#PhSTf{position:absolute;visibility:hidden}#PhSTf:"+p+"-shown"+r+"#PhSTf:-ms-input-"+p+""+r+"#PhSTf:-moz-"+p+r;h.appendChild(s);t=d.body.appendChild(t);var y=window.getComputedStyle(t,u).paddingTop;d.body.removeChild(t);h.removeChild(s);if(y==="183px"){d.documentElement.classList.add("placeholderPseudo");return}d.querySelectorAll("input["+p+"],textarea["+p+"]").forEach(function(i){if(i.getAttribute(p)!="")o.update.call(i);for(var n=0,a=["blur","keyup","input"];n