[JS]フォームのselect要素をHTMLの変更無しで、ミニマルに美しく使いやすくするスクリプト -Minimalect
フォームのselect要素をHTMLには手を加えずに、美しいミニマルなデザインを適用し、使いやすさもアップさせるjQueryのプラグインを紹介します。 デザインのテーマも用意されており、オリジナルのテーマをスタイルシートベースでつくることもできます。 Minimalect Minimalectの特徴 Minimalectのデモ Minimalectの使い方 Minimalectの特徴 select要素を洗練されたデザインに置き換えます。 optgroupsのサポート。 フィルタリングのサポート。 キーボードナビゲーション。 テーマのサポート。 Minimalectのデモ HTMLの変更は無しで、select要素を美しく、そして使いやすくしたデモがあります。 まずは、一つ目。
[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
フォームのラジオボタンやチェックボックスとテキストのずれを揃える方法 - CSSテクニック - acky.info
HTMLコード <div> <label><input type="radio" />ラジオボタン</label><br> <label><input type="checkbox" />チェックボックス</label><br> <select name="select"></select>セレクト </div> <div class="vertical-align"> <label><input type="radio" />ラジオボタン</label><br> <label><input type="checkbox" />チェックボックス</label><br> <select name="select"></select>セレクト </div> <div class="vertical-align-em"> <label><input type="radio" />ラジオボタン</
次世代の検索フォームを作成するjQuery＆CSS3サンプル:phpspot開発日誌
Creating “Next Level” Search Form Using jQuery & CSS3 ? Webstuffshare ? Learn and share. The simplest harmony. 次世代の検索フォームを作成するjQuery＆CSS3サンプル。 CSS3をフルに使って、面白い検索フォームを作るチュートリアルです。 アイデアの応用で面白いインタフェースが作れそうです ボタンがあってクリックするとアニメーションしながら伸びて検索フォームになります ボタンをクリックすると立体的にキューブっぽく回転して検索入力ボックスが現れます これを見ると、ああなんかまた色々と出来て数年後にはどうなっていっちゃうんだろう、ついていけるんだろうかなという不安すら覚えてしまいますね。 関連エントリ ページめくりを実現するためのjQueryプラグイン集 高機能なカルーセルを実装
フォームメール2 - PHPスクリプト | サイト作りの小役立ち工房
sformmail.php 【本体】 sfm_config.php 【設定ファイル】 sformmail.css 【共通CSS】 sfm_form.html 【入力フォーム用】 sfm_confirm.html 【確認画面用】 sfm_completion.html 【送信完了画面】 sfm_mail_tmpl.php 【メール送信用テンプレート】 sfm_reply_tmpl.php 【自動返信用テンプレート】 /utf-8 【UTF-8用サンプル】 /shift_jis 【SHIFT_JIS用サンプル】 ご利用の際は、設定ファイル及び付属のHTMLファイルを参考にして下さい。 現在、自宅環境とレンタルサーバ「heteml」で動作確認しています。 PHPのバージョンや環境によっては動作しない可能性があることをご了承下さい。 ※バージョン1.xxとは各種ファイルに互換性がありませんのでご注
ファイルアップロードの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が設定されれば、さら
[CSS]検索フォームを素敵なデザインするスタイルシート集
検索フォームを素敵なデザインにスタイリングする、クロスブラウザ対応のスタイルシートをCss Finestから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <form id=”searchform1″ method=”get” action=”" > <input class=”isearch1″ type=”text” name=”keywords” id=”keywords” /> <input class=”ibutton1″ type=”submit” value=”" /> </form> </textarea>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/06/jquery-forms.html