【フォーム】フォームの装飾いろいろ | Webデザインラボ
3. 画像を設定するサンプル 入力フォームとテキストエリアに背景画像を設定するサンプルです。 HTML <p>サンプル1: <input type="text" class="demo3_1"></p> <p>サンプル2: <textarea class="demo3_2"></textarea></p> CSS .demo3_1 { width: 200px; height: 20px; background: url(search.png) no-repeat 2px center; padding-left: 20px; } .demo3_2 { width: 250px; height: 180px; background: url(line.png) repeat top center; line-height: 30px; } Result 4. テキストを初期表示させるサンプ
jQuery Custom Select Box Plugin - jQuery.customSelect()
jQuery .customSelect()The ridiculously lightweight, semi-native select box styling plugin What it be This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable <span> element in order to acheive your desired look. Since it makes use of default browser functionality, it can be treated just like any ordinary HTML select box. This conc
フォームの入力項目に入力例を表示する | ユーザビリティ・EFOマニア!!
前回のエントリーで「お客様に優しいユーザビリティフォーム設計」についての話をしましたが、その実践例の一つをご紹介します。 これはformnotifierというJQueryで出来ている非常に軽いライブラリなんですが、テキスト入力ボックスにヒント表示することができます。 動作デモ 使い方は <script> $(document).ready(function(){ $(‘:input’).formNotifier(); }); </script> というコードを入力フォームページに追加するだけ。 これで「inputタグ」の「title属性」がヒント表示されます。 デフォルトだと表示がいまいちなので見た目を変える場合は、CSSで「formnotifier」クラスを変更してあげれば表示変更は可能です。 オススメはこんな感じ。 <style type=text/css> .form
inputにフォーカスすると消える文字をjQueryで実装する - Rewish
フォーカスすると消える文字（何も入力が無ければ初期値に戻す）を、jQueryだけで実装する方法を紹介します。 実装方法は凄く単純で、inputのvalueに予め文字列を入れておき、jQueryの設定ファイルに以下のコードを記述するだけです。 jQuery(function($) { var placeHolder = 'コメントを入力して下さい！'; $('input[type="text"]') .focus(function() { var self = $(this); if (self.val() === placeHolder) { self.val(''); } }) .blur(function() { var self = $(this); if (self.val() === "") { self.val(placeHolder); } }); }); input[typ
A jQuery inline form validation, because validation is a mess
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The ro
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
