如何从jquery mobile单选按钮中删除边框答案

【问题标题】：How to remove border from jquery mobile radio buttons如何从jquery mobile单选按钮中删除边框
【发布时间】：2012-06-16 03:07:10
【问题描述】：

我想保留一些格式，但删除 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 样式替换为fancy-checkboxes。

【问题讨论】：

你能更详细地描述一下你所说的边界是什么意思吗？
请出示一张图片和一些代码。
更新了代码和图片
嗨亚当，你的意思是说没有阴影只对按钮或其他一些元素？

标签： jquery css jquery-mobile

【解决方案1】：

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

【讨论】：

这已经非常接近想要的效果了！谢谢！

【解决方案2】：

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

【讨论】：

似乎有一些边距用于设置单选按钮和复选按钮的样式...很难全部删除...

【解决方案3】：

通过将以下 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;
}

【讨论】：

你能发张照片或小提琴吗？谢谢！
我用了jquerymobile themeroller，只是设置了颜色。下载它，用你的 html 稍微修改一下 html，然后创建了这个jsfiddle。在 css 的底部，我注释掉了移除边框和文本阴影的样式。这个jsfiddle是在第一个的基础上，但是代码不再注释掉，去掉了文字阴影和边框。此外，here 是选项位于同一控制组中的示例。
嗨 twsansbury 问题是你仍然有蓝色盒子，我想要的是完全摆脱盒子元素并应用不同的样式。我想从选择框中完全删除 jQuery 外观。
您只需要更多地使用 CSS。这个答案是一个很好的起点，如果您只是在浏览器中使用元素检查器查看 jquerymobile 应用了哪些样式，然后覆盖它们，我相信您可以找出 CSS 的其余部分。
抱歉，我无法理解最终的预期结果。 this 是朝着正确方向迈出的一步吗？它从按钮中删除了背景，因为之前的背景渐变在按钮之间提供了硬边。样式的难点在于普通的单选按钮总是存在的，并且需要被覆盖。为此，请使用 .ui-icon-radio-off 和 .ui-icon-radio-on 类。

【解决方案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;
}

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

我试图实现与您相同的目标，但只有一个复选框/单选按钮，这对我有用，所以我想我会分享 :)

【讨论】：