Textarea Tricks

By | Monday, August 15, 2011




Hide Comments









Code:
<html>
<head>
<style>
textarea {
border: 1px #12495d solid;
height: 50px;
overflow: auto;
width: 300px;
}
#t:focus {
box-shadow: 0 0 5px #32baed;
-moz-box-shadow: 0 0 5px #32baed;
-o-box-shadow: 0 0 5px #32baed;
-webkit-box-shadow: 0 0 5px #32baed;
outline: none;
}
#r {
resize: none;
}
#h {
resize: horizontal;
}
#v {
resize: vertical;
}
</style>
</head>
<body>
<textarea id="t" placeholder="Focus and Glow"></textarea><br><br>
<textarea id="h" placeholder="Horizontal Resize"></textarea><br><br>
<textarea id="v" placeholder="Vertical Resize"></textarea><br><br>
<textarea id="r" placeholder="No Resize"></textarea>
</body>
</html>