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 を知っているので、その部分は問題ではありません)。

EDIT：選択されていないラジオボタンのラベルとは異なるスタイルにするために、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

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 に答える
0

ほとんどのフォーム コントロールは、ブラウザではなく OS によってレンダリングされます。radio、checkbox、file入力のスタイルを設定し、選択する機能optionsはかなり制限されています。Javascript ベースのソリューションに頼らずに、やりたいことを実行できる信頼できるクロスブラウザーの方法は実際にはありません。CSSだけでは、あなたが望むことはできません。

于 2012-12-13T17:34:56.730 に答える