2

私はjquery uiダイアログを使用しており、次のようにjqueryを使用してボタンを追加しています:

 $("#151").dialog({
                autoOpen: false,
                autoResize: true,
                buttons: {
                    "OK": function () {
                        jQuery(this).dialog('close');
                    }
                }
                ,
                open: function () {
                    $('.ui-dialog-buttonset').find('button:contains("OK")').focus();
                    $('.ui-dialog-buttonset').find('button:contains("OK")').addClass('customokbutton');
                }
            });

custombutton クラスは次のようになります。

.customokbutton { 
    text-indent: -9999em; /* hides the text */
    color: transparent; /* also hides text */
    background-image: url(images/login-icon.png); /*replaces default image */
     background-repeat: no-repeat; 
    background-color: transparent;  
    background-repeat: no-repeat;   
    cursor: pointer;  
    border:none;
    height:30px;
    outline: none;
}

しかし、マウスをボタンに合わせると、少し下と右に移動します。Firebug を使用すると、マウスを離すと次の css クラスが追加されることがわかります (位置が変わります)。

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only customokbutton" role="button" aria-disabled="false"><span class="ui-button-text">OK</span></button>

そして、これはボタンにカーソルを合わせると：

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only customokbutton ui-state-hover" role="button" aria-disabled="false"><span class="ui-button-text">OK</span></button>

css は次のようになります。

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border: 1px solid #707070;
/*  background: #dadada;*/
    font-weight: normal;
    color: #212121;
}

どうすれば修正できますか？

4

1 に答える 1

0

テーマに大きく依存しますがui-state-hover、jQuery CSS には 1px の境界線があるようです。

border: 1px solid #fbcb09;

css はこちら: http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css

多分それがボタンを1px右と下にシフトしているものです。border: none;次のように、CSS でプロパティを適用してみてください。

.customokbutton { 
  [...]
  border:none !important;
  [...]
}
于 2013-05-03T15:25:40.313 に答える