LoginSignup
1

More than 5 years have passed since last update.

クリアボタンみたいなの

Last updated at Posted at 2014-01-23

「IE10はテキストボックスにクリアボタン出るじゃん、あれつけてよ」

って言われたのでそれっぽいの作った
まぁ 横に☓ボタン追加しただけですけどね。

    $(".clearField").each(function(){
        var targrt = $(this);
        $(this).after(
            $('<span>', {id : 'clearButton_' + $(this).attr('id') })
            .button({
                icons : {
                    primary: 'ui-icon-close'
                },
                text : false
            })
            .width(11)
            .click(function(){
                targrt.val("");
            })
        );
    });

clearFieldクラスが入ったフィールドの横にバツボタンを追加し、クリックでクリアします。
ボタン画像にはjQuery UI も使用してます。

適用するとこんなかんじです。
ie10っぽいクリアボタン.png

本当はIE10みたいにマウスオーバー時だけ出したかったけど、モックなのでひとまずこれで・・・

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1