0

ラジオボタンをカスタマイズしましたが、1つの例外を除いて、意図したとおりに機能しています。値をラジオボタンdivの内側に配置したいのですが、現在、作成したラジオボタンの外側に表示されています。これは実際にはクラスの大きなラジオです。作成したラジオボタン内に値1と値2を表示するにはどうすればよいですか

以下は私のコードです

css：

<style>
    .ipad {
        -webkit-appearance: none;
        background-color: #fafafa;
        border: 1px solid #cacece;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
        padding: 9px;
        border-radius: 3px;
        display: inline-block;
        position: relative;
    }

    .ipad:active, .ipad:checked:active {
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
    }

    .ipad:checked {
        background-color: blue;
        border: 1px solid #adb8c0;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
        color: #99a1a7;
    }
    .ipad:checked:after {
        content: '\2714';
        font-size: 14px;
        position: absolute;
        top: 0px;
        left: 3px;
        color: transparent;
    }
    .big-radio {
        padding: 18px;
    }

    .big-radio:checked:after {
        font-size: 28px;
        left: 6px;
    }



</style>

HTML：

<div class="button-holder">
    <input type="radio" class="ipad big-radio" name="radioGroup" value="2081764"/> Value1
</div>
<div class="button-holder">
    <input type="radio" class="ipad big-radio" name="radioGroup" value="2081765"/> Value 2
</div>

ここでjsfiddleを見つけてください：

http://jsfiddle.net/4fu3q/

ありがとう

4

2 に答える 2

2

私はデータ属性を使用します：

各入力にhtml属性を使用します。<input data-value="Value Text">

そしてあなたのCSSで：.ipad:before { content: attr(data-value); }

http://jsfiddle.net/4fu3q/3/

于 2012-09-07T19:15:55.643 に答える
1

それは理想からはほど遠いですが、あなたはそれを一種の偽物にすることができます。を使用するlabelと、クリック可能性を失うことなく、ラジオボタンの上にテキストをオーバーレイできます。次のようなものが1つの例です。

http://jsfiddle.net/4fu3q/2/

<div class="button-holder">
    <input type="radio" class="ipad big-radio"  name="radioGroup" value="2081764" id="one">  
    <label for="one">V1</label>
</div>

label{
    position:relative;
    left: -35px;    
    top: -10px;
}

ボタンは実際にはテキスト内にないため、テキストに合わせてサイズが変更されることはありません。理想からはほど遠いですが、すべてをjavascriptに置き換えずにできる限り近いかもしれません。

于 2012-09-07T19:13:12.053 に答える