Skip to content

Instantly share code, notes, and snippets.

@tonyc726

tonyc726/auto_textarea.html

Last active December 23, 2015 17:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tonyc726/6667879 to your computer and use it in GitHub Desktop.
Save tonyc726/6667879 to your computer and use it in GitHub Desktop.
Download ZIP
模拟宽度自适应的输入框 From http://www.css88.com/demo/input-textarea-adaptive/
Raw
auto_textarea.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
h2 { margin:0; padding:10px 0; font-size:14px; }
.mod-retweet { background:#E4EFF4; border:1px solid #A8D1E0; padding:3px 5px 5px; margin-top:5px; }
.mod-retweet .mod-retweet-textarea { background-color: #FFFFFF; border:1px solid #64B2D1; margin-bottom:5px; overflow:hidden; padding:2px; position:relative; zoom:1 }
.mod-retweet .mod-retweet-textarea textarea {padding: 0;margin: 0; border:0 none; font-size:12px; height:80px; line-height:1.5em; width:100%; display:block }
.mod-retweet .mod-retweet-textarea input { border:0 none; font-size:12px; height:20px; line-height:1.5em; width:100%; }
</style>
<title>模拟宽度自适应的输入框</title>
</head>
<body>
<h1>模拟宽度自适应的输入框</h1>
<div class="mod-retweet">
<h2>模拟input的自适应：</h2>
<div class="mod-retweet-textarea">
<input type="text" name="textfield" id="textfield">
</div>
</div>
<hr>
<div class="mod-retweet">
<h2>模拟textarea的自适应：</h2>
<div class="mod-retweet-textarea">
<textarea maxlength="500" rows="5" cols="45" name="bookcontent"></textarea>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment