Skip to content

Instantly share code, notes, and snippets.

@mingchen
Created May 6, 2015 21:33
Show Gist options
  • Save mingchen/1c8a31f4855054d7bade to your computer and use it in GitHub Desktop.
Save mingchen/1c8a31f4855054d7bade to your computer and use it in GitHub Desktop.
Tax form style inline input box
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tax form style input box</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="form-example2">
<div class='outer'>
<div class='title'>Title</div>
<div contentEditable="true" ng-model="content" title="Click to edit">Some</div>
</div>
<pre>model = {{content}}</pre>
<style type="text/css">
div[contentEditable] {
cursor: pointer;
background-color: #D0D0D0;
}
div[contentEditable]:focus {
outline: none;
}
.title {
background-color: #D0D0D0;
}
.outer {
width: 150px;
border: 1px solid black;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment