jQuery でフォームフォーカスの背景色変更(改訂版)

以前の版を見てみると、なんか挙動が変なので書き直してみました、動作は以前と同じ「text、password、textarea」の3要素で、フォーカス時だけデザインを変えます。

focus時にjQueryでTwitter風にデザイン変更

対応ブラウザはIE6~8、Chrome、Firefox、Opera。Twitterの色を真似てCSS3のBox-shadowもつけてみました。

サンプルページを見る

  • Chrome、FirefoxだとTwitterに似たbox-shadowも付きます。
  • Chromeではselect要素にbox-shadowはつかないようです。


Javascript部分

フォーカス時に、クラスを付けたりはずしたりしてるだけです。

/*
 * EX: change the input element on focus and blur
 * update(y-m-d): 2010-10-22
 * auther: Luvsic
 * licence: MIT
 * info: http://luvsic.net/item/119
 * filename:
 *
 */

jQuery(function(){

        var targetInput = ':text, :password, textarea';

        $(targetInput).addClass('jInput');

        $(targetInput).focus(function(){
                $(this).addClass('jFocus');
        });
        $(targetInput).blur(function(){
                if ($(this).find('.jFocus')) {
                        $(this).removeClass('jFocus');
                }
        });

});

デザイン部分

Twitter風のBox-shadowはChrome、Firefoxのみ。
.jFocusはJavascriptで上書きするクラスなので、.jInputと重複する場合はimportantをつけないとIEで変になります。

.jInput {
        padding: 4px 2px 2px !important;
        border: 1px solid #A7A6AA;
        }
.jFocus {
        outline: medium none !important;
        background-color: #f7fdff !important;
        border-color: #6ddeff !important;
        }
.jFocus {
        box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
        -webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
        -moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
        -ms-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
        -o-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
        border-color: rgba(82, 168, 236, 0.75) !important;
        }
/
Skooler Records

No comments yet

%3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%22%20%76%61%6c%75%65%3d%22%37%61%38%63%36%62%61%66%39%65%64%38%39%32%30%36%65%33%61%63%63%37%37%33%31%38%62%65%36%62%31%36%22%3e %3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%5f%68%61%73%68%22%20%76%61%6c%75%65%3d%22%35%34%33%38%66%36%33%30%66%63%66%38%30%63%36%39%30%61%38%35%63%66%39%31%64%66%38%62%38%37%64%36%22%3e
© 2006 – 2014 by Luvsic. Some rights reserved.