Bootstrapを使ったデザインの勉強をしているのですが、プログラムを見ると、ものすごい量のCSSで、ちょっとげんなり。
そこで、inputタグのtext属性だけ抜き出せないかなーっと思い、ちょっとこさえました。
| <!DOCTYPE HTML> <html> <head> <style type="text/css"> input { -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{ border-color: rgba(82, 168, 236, 0.8); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(82, 168, 236, 0.6); outline: 0 none; } input.mini{ width: 60px; } input.small{ width: 90px; } input.medium{ width: 150px; } input.large{ width: 210px; } input.xlarge{ width: 270px; } input.xxlarge{ width: 530px; } </style> </head> <body> <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text"> </body> </html> |
この調子で、どんどんパーツごとに抜き出したいなー。
0 コメント:
コメントを投稿