<input type=
どうもfujiharaです。ここ最近の台風ラッシュには困りました。 通勤電車が見合わせてまったく動かない経験を久々にしました。 本日は<input type="file">の装飾を行っていきます。 方法は実在する<input type="file"> を見えないようにして、 装飾可能な a要素がクリックされたタイミングで見えない input要素を クリックしてあげます。 失敗例 $('input:file').css({ //元々のファイルフォームを隠す。 'opacity':0, 'display':'none' }); $('a').on('click', function(e) { //装飾用のリンクをクリックしたタイミング $('input:file').click(); //ファイルフォームをクリック e.preventDefault(); }); 実はこのままだと
input に onfocus で背景色や文字を消す はじめてのブログデザイン
検索窓やテキスト入力フォームなどの input 要素に使えるデザインの小技です。簡単な JavaScript で実装できるので皆さんも挑戦してみてはいかがでしょうか？ まずは下のサンプルをご覧ください。 カーソルを上の「サンプル検索窓」と表示されたテキストボックスに合わせクリックしてみてください。 どうでしょう？ 検索窓にテキスト（文字）を入力可能な状態にすると「サンプル検索窓」と表示されていたテキストが消え、背景色が薄いグレイから白に変わったのが分かりましたか？また、選択状態を解除（他の部分をクリックで解除できます）で初期状態に戻ります。 なかなか地味な小技ですが、本当のお洒落とは地味なところで差がつくと誰かがどこかで言っていたような気がします・・・。 それはともかく、お洒落とは関係なく使い道によってはユーザビリティ（使いやすさ）も多少アップするのでは？なんて考えから、今回ご紹介させて頂
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
