[CSS]フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル
CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。
チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか - かちびと.net
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
ファイルアップロードのinput type="file"にsize属性とwidthスタイルを適用してみたテスト - kanonji’s diary
ファイルアップロードのinput要素の横幅の扱いが、各ブラウザで異なるようなので、まずは比べてみました。 概要 input要素は下記の4種類を比べてみました。 size属性もwidthも無し。 size="30" width:300px; size="30" と width:300px; あ、size="30"とwidth:300px;は、別に同じ長さになるかとか確認してないです。 結果 下のほうに、スクリーンショットと、使用したhtmlソースコードがあります。 WebKit系のSafariとChromeは、そもそもinput type="file"で生成されるUIが特殊です。 size="30"だと短すぎた可能性もありますが、widthは正しく反映されているような雰囲気です。 IE6とOperaは、割と期待通りの動きをしている気がします。 sizeが有効で、widthが設定されれば、さら
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
