0

我正在尝试像切换按钮一样设置单选按钮的样式。我想跨浏览器做，所以我猜 jquery 是唯一的选择（CSS3 属性：checked 对我来说不是一个选项）

我知道有很多已发布的解决方案，但我不能直接使用其中任何一个，因为我无法更改任何 HTML 代码（它是由 Drupal 创建的）。

我尝试为我的 HTML 调整不同的解决方案（例如https://stackoverflow.com/a/9376041和CSS change active select for radio），但我不知道 javascript，我无法让它们工作。

我的 HTML 是：

<div id="edit-status" class="form-radios">
<div class="form-item form-type-radio form-item-status">
<input type="radio" id="edit-status-0" name="status" value="0" class="form-radio"/>
<label class="option" for="edit-status-0">Bloqueado</label>
</div>
<div class="form-item form-type-radio form-item-status">
<input type="radio" id="edit-status-1" name="status" value="1" checked="checked" class="form-radio"/>
<label class="option" for="edit-status-1">Activo</label>
</div>
</div>

如果有人能给我 Jquery 代码，我将不胜感激（我知道 CSS，所以这部分不是问题）。

编辑：我需要 Jquery 为所选单选按钮的标签提供一个类，以便将其样式设置为与未选择单选按钮的标签不同。

4

3 回答 3

3

这是你想要的吗？

http://jsfiddle.net/aS69U/7/

.form-radios {
    display: block;
    float: left;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    font-weight: bold;
    text-transform: uppercase;
    background: #eee;
    border: 1px solid #aaa;
    padding: 2px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
    margin-left: 20px;
}

.form-radios input[type=radio] {
    display: none;
}

.form-radios label     {
    display: block;
    float: left;
    padding: 3px 6px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #aaa;
    cursor: pointer;
}

.form-radios label:hover {
    text-shadow: 0 0 2px #fff;
    color: #888;
}

.form-radios label.checked {
    background: #8fc800;
    color: #eee;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
    background: -webkit-linear-gradient(top, #8fc800, #438c00);
    background: -moz-linear-gradient(top, #8fc800, #438c00);
    background: -ms-linear-gradient(top, #8fc800, #438c00);
    cursor: default;
}​
于 2012-12-13T17:42:43.827 回答
0

大多数表单控件由操作系统呈现，而不是浏览器。样式radio、、输入和选择checkbox的能力非常有限。如果不求助于基于 Javascript 的解决方案，确实没有可靠的跨浏览器方法来做你想做的事。单靠 CSS 不能做你想做的事。fileoptions

于 2012-12-13T17:34:56.730 回答
0

JS：

$('label.option').click(function(){
    $('.form-item input[type=radio]').attr('checked',null);
    $('label.option').removeClass("checked");
    $(this).prev().attr('checked',"checked");
    $(this).addClass("checked");
})

CSS：

.form-item.form-type-radio.form-item-status{
   display:inline-block;        
}

.form-type-radio input[type=radio]
{
    display: none;
}

 .checked{
  background:#F00;
 }

简而言之。

http://jsfiddle.net/camus/pLfvS/

于 2012-12-13T17:42:51.977 回答