jQuery UIのスタイリングダイアログボタン

Question

jQueryのUIダイアログを数時間スタイル設定しようとしていました。ダイアログにボタンを手動で追加することで、私が望む外観を得ることができました。実際の例については、次のリンクを参照してください。 This Works

ここで、正しい方法で行い、jQuery UIマニュアルごとにボタンを追加したいと思います。ボタンに自動的に追加される10億のクラスがあるので、これらのファクトリクラスを削除してから、カスタムクラスをいくつか追加します。

$(this).dialog("widget").find('button').removeClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only').parent().removeAttr('class').parent().removeAttr('class'); 
... 
buttons  : [ 
{text:'YES, DELETE IT',class:'newButton red',click: function() {alert("Delete Record");$(this).dialog("close");}}, 
{text:'CANCEL',class:'newButton gray',click: function() {$(this).dialog("close");}} 
] 

私のすべての試みThis doesn't quite work

まず失敗するため、以下のリンクを参照してください、ボタンは、カラー画像が表示されません。次に、ダイアログのどこかをクリックすると、ボタンに画像が表示されます。ダイアログが閉じられて開かれた場合、ダイアログはより大きくなります。その上に、ボタンは一緒に押しつぶされていますが、私はおそらくそれを理解することができます。

私の方法で私のエラーを見つけるのを手助けしてください！ここで

Answer 1

は何が起こっているのかです：

ページのロードで、あなたの赤いボタンがui-state-focusのクラスがあります。ページ上の任意の場所をクリックすると、そのボタンはそのクラスを失い、赤い背景イメージを表示します。テキストがはるかに大きい理由を説明できる

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { 
    font-family: Verdana,Arial,sans-serif; 
    font-size: 1em; 
} 

：私が気づいたもう一つは、ボタンには、次の継承されていることです。私はまた、あなたのボタンがあなたの最初のテストから、このCSSを継承していないことに気づいた：

#dialog-deleteListRecord button { 
    -moz-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    cursor: pointer; 
    padding: 3px 8px; 
    color: white; 
    font-size: 12px; 
    font-weight: bolder; 
    font-family: Arial, Helvetica, sans-serif; 
} 

私はこれがあなたの問題を解決するための方向性を与えることを願っています。