3

我想保留一些格式，但删除 jQuery 单选按钮的边框。有一个没有阴影的主题也很好。有干净的 jQM 版本吗？我使用了themeroller，但我仍然在文本中得到阴影，并且找不到删除样式的方法......

<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/我想将 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 放置在我的 jquery 移动主题的底部，我能够删除单选按钮和复选框按钮周围的边框，以及删除文本阴影：

.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 回答
2

用 !important 在你自己的 css 上覆盖某些样式就足够了（例如 .nameofJqueryStyle {border: none !important;} ）。您可以使用 FireBug 或 Chrome 开发工具找出您想要定位的样式。

于 2012-06-06T17:50:48.720 回答
1

Use a data-theme that you haven't created. For example, if you've created Swatch A, B, C and D, use:

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

This will do if you try to get rid of the borders but you will see a background image on the checkbox. To get rid of that, create a stylesheet what you will use to override the jquery mobile styles and include in after the jquery mobile stylesheets. For example:

<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" />

Then, in Custom.css, insert the following:

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

where the background-color is the color of your choice when the radiobutton is in inactive state.

I was trying to achieve the same thing as you but for one checkbox/radiobutton and this worked for me so I thought I would share :)

于 2012-06-15T19:01:10.757 回答