Secure Input

Developer
GRAY GHOST
Size
6,436 Kb
Views
30,360
  1. Secure Input Previews
  2. Secure Input HTML Codes
  3. Secure Input CSS Codes
  4. Secure Input JS Codes

How do I make an secure input?

A secure way to hide private input fields as to not be visible throughout the duration of information input when working in public places.. What is a secure input? How do you make a secure input? This script and codes were developed by GRAY GHOST on 13 October 2022, Thursday.

Secure Input Previews
IQ Test

Secure Input - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Secure Input</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="slabel"> <input id="credit-card" type="text" pattern="[0-9]{13,16}" placeholder="xxxxxxxxxxxxxxxx"> <label for="credit-card">Credit Card</label>
</div> <script src='js/a08e0d79c150ff5030f9b6afa.js'></script> <script src="js/index.js"></script>
</body>
</html>

Secure Input - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
html, body { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%;
}
html { background: #193441;
}
.slabel { display: inline-block; max-width: 240px; position: relative; width: 100%; font-family: "Open Sans";
}
.slabel input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; border-radius: 3px; box-sizing: border-box; display: inline-block; outline: 0; padding: 10px 15px; -webkit-transition: -webkit-transform 225ms ease-in-out; transition: -webkit-transform 225ms ease-in-out; transition: transform 225ms ease-in-out; transition: transform 225ms ease-in-out, -webkit-transform 225ms ease-in-out; width: 100%; background: #efefef;
}
.slabel input:empty:valid + label { color: #5C832F !important;
}
.slabel input:valid + label { color: #5C832F !important;
}
.slabel input:invalid { background: #E82C0C; color: white;
}
.slabel input:invalid + label { color: white;
}
.slabel input:invalid + label:after { background: #E82C0C;
}
.slabel input::-webkit-input-placeholder { color: #B9E0D6;
}
.slabel input::-moz-placeholder { color: #B9E0D6;
}
.slabel input:-ms-input-placeholder { color: #B9E0D6;
}
.slabel input::placeholder { color: #B9E0D6;
}
.slabel input + label { border: 0; border-radius: 4px; box-sizing: border-box; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; padding: 10px 15px; position: absolute; top: 0; left: 0; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 225ms ease-in-out; transition: -webkit-transform 225ms ease-in-out; transition: transform 225ms ease-in-out; transition: transform 225ms ease-in-out, -webkit-transform 225ms ease-in-out; width: 100%; color: inherit;
}
.slabel input + label:before, .slabel input + label:after { content: ""; position: absolute; right: 0; left: 0; z-index: -1; -webkit-transition: -webkit-transform 225ms ease-in-out; transition: -webkit-transform 225ms ease-in-out; transition: transform 225ms ease-in-out; transition: transform 225ms ease-in-out, -webkit-transform 225ms ease-in-out;
}
.slabel input + label:before { -webkit-transform: translateY(-100%); transform: translateY(-100%);
}
.slabel input + label:after { border-radius: 4px; top: 0; bottom: 0; background: #efefef;
}
.slabel input:focus:empty:valid + label { color: #5C832F !important;
}
.slabel input:focus:invalid + label { color: #E82C0C;
}
.slabel input:focus + label { border: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%);
}
.slabel input:focus + label:after { -webkit-transform: translateY(100%); transform: translateY(100%);
}

Secure Input - Script Codes JS Codes

// Demo used for my SitePoint article Theming Forms w/Sass : http://www.sitepoint.com/theming-form-elements-sass
Secure Input - Script Codes
Secure Input - Script Codes
Home Page Home
Developer GRAY GHOST
Username grayghostvisuals
Uploaded October 13, 2022
Rating 4.5
Size 6,436 Kb
Views 30,360
Do you need developer help for Secure Input?

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!

GRAY GHOST (grayghostvisuals) Script Codes
Name
Static Image to Video Block
Mocean SliderModals
Blur Filter
Fixed Curtains
Kid Passions
Polybird
Full Screen Background Video
Accessible Dropdown Menu
Rotating Cube
Facebook Android App Off Canvas Menu Pattern
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!