Skip to content

Instantly share code, notes, and snippets.

@sztan

sztan/flat_inputs.html

Created December 27, 2018 09:56
Show Gist options
  • Save sztan/1173d70bfc70e3427e94c3d45e33d222 to your computer and use it in GitHub Desktop.
Save sztan/1173d70bfc70e3427e94c3d45e33d222 to your computer and use it in GitHub Desktop.
Download ZIP
provides "flat style" inputs
Raw
flat_inputs.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>simple flat inputs</title>
<meta name="description" content="styling inputs flat">
<meta name="author" content="Stan">
<style>
div {
background: ivory;
}
div.myForm input {
border: 1px solid transparent;
background: none;
cursor: default;
}
div.myForm input.withHover:hover {
border: 1px dotted lightgrey;
background: transparent;
cursor:pointer;
}
div.myForm input.withoutHover:hover {
border: 1px solid transparent;
cursor: default;
}
div.myForm input.editing {
background: white;
}
</style>
</head>
<body>
<div class="myForm">
&nbsp;<input type="text" class="withHover" placeholder="edit me">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script>
$(document).ready(function() {
console.log("a");
dynInputOn();
});
function dynInputOn(){
console.log("b");
$("div.myForm input.withHover").bind("click", function(){
$(this).toggleClass("withHover").toggleClass("withoutHover").toggleClass("editing");
$(this).unbind("click");
dynInputOff();
});
}
function dynInputOff(){
console.log("c");
$("div.myForm input.withoutHover").bind("blur", function(){
$(this).toggleClass("withHover").toggleClass("withoutHover").toggleClass("editing");
$(this).unbind("blur");
dynInputOn();
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment