ワンボックススタイルを達成するために、純粋なCSS

htmlコード

< H2 >あなたの好きな果物</ H2 > 
< divのクラス= "INPUT-ラジオ" > 
    <！ - チェックcheckedプロパティの追加] - > 
     < INPUT 上記のid上記= "アップル" タイプの= "ラジオ" 名前=「フルーツ" 確認/> 
     < ラベルのために、"アップル= " >アップル</ ラベル> 
</ divの> 
< divのクラス=" INPUT-ラジオ" > 
      < INPUT 述べたID上記="バナナ」 タイプ= 『ラジオ』の名前= "フルーツ"  /> 
      < ラベル用= "バナナ" >香蕉</ ラベル> 
</ divの> 
< divのクラス= "入力ラジオ" > 
     < 入力ID = "オレンジ" タイプ= "ラジオ" 名前= "フルーツ"  /> 
     < ラベル用= "オレンジ" >橙子</ ラベル> 
</ divの> 
< divのクラス= "入力ラジオ" > 
    <入力ID =「いちご」タイプ= "ラジオ" 名前= "フルーツ"  /> 
     < ラベル用= "いちご" >草莓</ ラベル> 
</ DIV >

コード2.css

        .inputラジオ { 
              マージン：1EM 0。
              表示：インラインブロック。
        } 
        .inputラジオ入力[タイプ= "ラジオ"] { 
            不透明度：0。
        } 
        .inputラジオ入力[タイプ=「ラジオ」] +ラベル { 
            位置：相対。
              カーソル：ポインタ ; 
        } 
        .inputラジオ入力[タイプ=「ラジオ」] +ラベル::前 { 
            内容：「」。
            位置：絶対 ; 
            左：-24px ; 
            境界半径：50％ 。
            幅：18px ; 
            高さ：18px ; 
            国境：1pxの固体＃999 ; 
        } 
        .inputラジオ入力[タイプ=「ラジオ」] +ラベル::後 { 
            内容：「」。
            位置：絶対 ; 
            左：-20px ;
            トップ：4PX。
            境界半径：50％ 。
            幅：12ピクセル ; 
            高さ：12ピクセル ; 
        } 
        .inputラジオ入力[タイプ=「ラジオ」]：前チェック+ラベル:: { 
            ボーダー：1ピクセル固体＃24B7E5。
            ボックスシャドウ：0 0計6Px＃24B7E5。
            トランジション：すべての.3s。
        } 
        .inputラジオ入力[タイプ=「ラジオ」]：後にチェック+ラベル:: { 
            背景：＃24B7E5。
              トランジション：すべての.5s。
        }

3.効果

ワンボックススタイルを達成するために、純粋なCSS

おすすめ