如何从jquery移动单选按钮中删除边框

Question

我想保留一些格式化但删除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样式。

Answer 1

用你自己的css重写某些样式就足够了（例如.nameofJqueryStyle {border：none！important;}）。您可以使用FireBug或Chrome开发工具找出要定位的样式。

Answer 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;
}

Answer 3

以下是您可以添加到底部的一些样式，以便与您正在寻找的内容非常接近。（建立在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/

Answer 4

使用您尚未创建的数据主题。例如，如果您已创建Swatch A，B，C和D，请使用：

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

如果您尝试摆脱边框，但是您会在复选框上看到背景图片。要摆脱这种情况，请创建一个样式表，用于覆盖jquery移动样式并包含在jquery移动样式表之后。 例如：

<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;
}

当radiobutton处于非活动状态时，背景颜色是您选择的颜色。

我试图与你做同样的事情，但是对于一个复选框/ radiobutton这对我有用，所以我想我会分享：）