前回、Bootstrapベースを使ったinputタグの生成方法について書きましたが、今回、textareaについて調査しました。
サンプルソースは以下のようになります。
| <style type="text/css"> input , textarea{ -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); display: inline-block; height: 18px; padding: 4px; font-size: 13px; line-height: 18px; color: gray; border: 1px solid #CCC; -webkit-border-radius: 3px; -moz-border-radius: 3px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; vertical-align: baseline; } input:focus, textarea:focus{ outline: 0 none; border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); } input.mini,textarea.mini{ width: 60px; } input.small,textarea.small{ width: 90px; } input.medium,textarea.medium{ width: 150px; } input.large,textarea.large{ width: 210px; } input.xlarge,textarea.xlarge{ width: 270px; } input.xxlarge,textarea.xxlarge{ width: 530px; } textarea { height: auto; overflow: auto; vertical-align: top; } textarea.xxlarge{ overflow-y: auto; } </style> <body> <textarea class="xlarge" id="textarea2" name="textarea2" rows="3"></textarea> </body> |
かっけぇ！！
0 コメント:
コメントを投稿