Skip to content

Instantly share code, notes, and snippets.

@LpDmc

LpDmc/index.html

Last active December 21, 2015 10:08
Show Gist options
  • Save LpDmc/6289421 to your computer and use it in GitHub Desktop.
Save LpDmc/6289421 to your computer and use it in GitHub Desktop.
Download ZIP
textarea problem ...
Raw
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>textarea problem</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="post-box.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<div class="post-coment-status">
<div class="top-div"></div>
<textarea id="ta" name="SContent" placeholder="Qué estás pensando?" ></textarea>
</div>
</body>
</html>
Raw
main.css
body {
margin: 0;
background: #e9eaee;
}
.post-coment-status {
float: right;
width: 544px;
background: #fff;
border: 1px solid #d9dbda;
border-radius: 3px;
}
.top-div {
height: 36px;
background: #f6f7f9;
border-bottom: 1px solid #d9dbda;
}
#ta {
font-family: Arial, Helvetica, Sans-serif;
font-size: 16px;
width: 514px;
border: none;
background: #fff;
resize: none;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
height: 19px;
outline: none;
color: #a9a9a9;
overflow: hidden;
border-radius: 6px solid;
}
#ta {
transition: height 0.1s;
}
#ta:focus {
height: 50px;
}
Raw
post-box.js
(function(){
window.onload = function(){
var ta = document.getElementById("ta");
ta.onfocus = function(){
this.style.height = "50px";
}
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment