3

いくつかのフォーマットを保持したいのですが、jQueryラジオボタンの境界線を削除します。影のないテーマもいいですね。jQMのクリーンバージョンはありますか？テーマローラーを使用しましたが、テキストに影が表示され、スタイリングを削除する方法が見つかりませんでした...

<div data-role="fieldcontain" data-mini="true">
  <div data-role="fieldcontain">
    <fieldset data-role="none">
      <input type="radio" name="" id="Select_0" value="" />
      <label for="Select_0">option1</label>
      <input type="radio" name="" id="Select_1" value="" />
      <label for="Select_1">option1</label>
      <input type="radio" name="" id="Select_2" value="" />
      <label for="Select_2">option1</label>
      <input type="radio" name="" id="Select_3" value="" />
      <label for="Select_3">option1</label>
    </fieldset>
  </div> 
</div>

私が欲しいもの ラジオの問題

青は私が欲しいものです緑は私が今持っているものです。青はhttp://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/からのものです。fancy-checkboxesのjQMスタイルを置き換えたいと思います。

4

4 に答える 4

2

探しているものにかなり近づけるために下部に追加できるいくつかのスタイルがあります（twsansburyの答えの上に構築されています）

/* remove rounded corners */
.ui-btn-corner-all {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

/* remove border between each item */
.ui-btn-inner{
  border: 0;
}

/* remove margin between items */
fieldset .ui-radio {
  margin: 0;
}

/* change background, remove other border, unbold text */
.ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a {
  background: #4f83bc;
  background-image: none;
  border: 0;
  font-weight: normal;
}


/* change color of radio background */
.ui-checkbox-on .ui-icon, .ui-radio-on .ui-icon {
  background-color: #456;
}

結果：

ここに画像の説明を入力してください

http://jsfiddle.net/bJHrM/7/

于 2012-06-15T03:54:51.190 に答える
2

独自のcssで！importantを使用して特定のスタイルをオーバーライドするだけで十分です（例：.nameofJqueryStyle {border：none！important;}）。FireBugまたはChrome開発ツールのいずれかを使用して、ターゲットにするスタイルを把握できます。

于 2012-06-06T17:50:48.720 に答える
2

jquery mobileテーマの下部に次のcssを配置することで、ラジオボタンとチェックボックスボタンの周囲の境界線を削除したり、テキストの影を削除したりすることができました。

.ui-checkbox .ui-btn-inner,
.ui-radio .ui-btn-inner
{
  border: none;
}

.ui-checkbox .ui-btn-up-a,
.ui-checkbox .ui-btn-hover-a,
.ui-checkbox .ui-btn-down-a,
.ui-radio .ui-btn-up-a,
.ui-radio .ui-btn-hover-a,
.ui-radio .ui-btn-down-a
{
  border: none;
  text-shadow: none;
}
于 2012-06-11T14:02:11.297 に答える
1

作成していないデータテーマを使用します。たとえば、スウォッチA、B、C、およびDを作成した場合は、次を使用します。

    <input type="radio" name="" id="Select_0" value="" data-theme="e" />

これは、境界線を削除しようとした場合に機能しますが、チェックボックスに背景画像が表示されます。これを取り除くには、jquery mobileスタイルをオーバーライドするために使用するスタイルシートを作成し、jquerymobileスタイルシートの後に含めます。例えば：

<link rel="stylesheet" href="/MyApp/Content/themes/CustomTheme.css" />
 <link rel="stylesheet" href="/MyApp/Content/jquery.mobile.structure-1.1.0.css" />
 <!-- Custom stylesheet overriding styles -->
 <link rel="stylesheet" href="/MyApp/Content/Custom.css" />

次に、Custom.cssに次を挿入します。

.ui-checkbox-off .ui-icon, .ui-radio-off .ui-icon
{
  background-color: #ADADAD;
}

ここで、background-colorは、ラジオボタンが非アクティブ状態のときに選択した色です。

私はあなたと同じことを達成しようとしていましたが、1つのチェックボックス/ラジオボタンでこれがうまくいったので、共有したいと思いました:)

于 2012-06-15T19:01:10.757 に答える