Question

我正在尝试创建具有默认状态null的Yes / No按钮，按下时，yes变为绿色，并且不变为红色。

以下是代码示例：

<label class="formheading">Apparatus group is correct</label>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false" class="right">
    <input type="radio" name="q2" id="q2y" value="Yes">
    <label for="q2y">Yes</label>
    <input type="radio" name="q2" id="q2n" value="No">
    <label for="q2n">No</label>
</fieldset>

这是我的jsfiddle - 你可以看到我只是设法将所有按钮的按钮更改为绿色......但是我想要的是按下后不会变为红色。

我找到了一些类似的解决方案，但似乎没有一个与JQM 1.4.2一起使用

Answer 1

如果您不打算添加除2之外的任何其他按钮，这对我来说非常有用..

.myform .ui-btn-active.ui-last-child{
    background-color: red !important;
    border-color: red !important;
}

这会选择每个.ui-btn-active元素中的最后一个.myform。您也不必为HTML添加任何额外的标记或类！：）

JFIDDLE：http://jsfiddle.net/ambvdznb/2/

Answer 2

您可以将课程.no添加到＆＃34;否＆＃34;标签：

<label for="q2n" class="no">No</label>

并添加此规则：

.myform .ui-btn-active.no {
    background-color: red !important;
    border-color: crimson !important;
    color: #fff !important;
    text-shadow: none !important;
}

如果需要，这将允许您将来拥有更多按钮。

演示：http://jsfiddle.net/ambvdznb/6/

Answer 3

只需为编号

添加其他选择器

.myform .ui-btn-active[for="q2n"] {
    background-color: red !important;
    border-color: red !important;
}

请参阅此处http://jsfiddle.net/ambvdznb/

Answer 4

您可以为输入类提供标签，例如'yesbutton'和'nobutton'，然后使用简单的css选择器为它们提供不同的颜色，如下所示：

// HTML

<div class="myform">
    <label class="formheading">Question 2</label>

    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="false" class="right">
        <input type="radio" name="q2" id="q2y" value="Yes">
        <label for="q2y" class="yesbutton">Yes</label>
        <input type="radio" name="q2" id="q2n" value="No">
        <label for="q2n" class="nobutton">No</label>
    </fieldset>
</div>

// CSS

.right {
     float: right !important;
}
.myform {
    padding:20px;
}
.myform .ui-btn-active.yesbutton {
    background-color: green !important;
    border-color: #1F802E !important;
    color: #fff !important;
    text-shadow: none !important;
}
.myform .ui-btn-active.nobutton {
    background-color: red !important;
    border-color: #1F802E !important;
    color: #fff !important;
    text-shadow: none !important;
}

Answer 5

background-color属性应该应用于＆lt; label＆gt;而不是＆lt; input＆gt;。

首先为您的元素声明两个ID：

...
<label for="q2y" id="q2yl">Yes</label>
...
<label for="q2n" id="q2nl">No</label>

然后为新元素扩展CSS：

.myform #q2yl.ui-btn-active {
    background-color: green !important;
}
.myform #q2nl.ui-btn-active {
    background-color: red !important;
}

您可以从上一个元素中删除现有的背景颜色。

.myform .ui-btn-active {
    border-color: #1F802E !important;
    color: #fff !important;
    text-shadow: none !important;
}

Answer 6

Fiddle

检查其他工作答案..：D

.myform .ui-first-child.ui-btn-active {
background-color: green !important;
border-color: #1F802E !important;
color: #fff !important;
text-shadow: none !important;
}
.myform .ui-last-child.ui-btn-active {
background-color: red !important;
border-color: red !important;
color: #fff !important;
text-shadow: none !important;
}

Answer 7

尝试添加该css规则：

.myform .ui-btn-active[for=q2n] {
background-color: red !important;
}

Jsfiddle

单击时使用多种颜色更改单选按钮颜色

7 个答案:

演示：http://jsfiddle.net/ambvdznb/6/