asp.netでcssラジオボタンを作成するには？

Question

私はasp.netを使用してWebアプリケーションを作成していると私は以下のようにラジオボタン使ってCSSを飾るしようとしています：

をしかし、このようにラジオボタンを設計した後、任意のより多くの作業をされていません。これらのボタンは無効になっています。ここに私のコードは次のとおりです。

<asp:RadioButtonList ID="rdbSMSType" runat="server" AutoPostBack="true" RepeatDirection 
    ="Horizontal" OnSelectedIndexChanged="rdbSMSType_SelectedIndexChanged" > 
    <asp:ListItem Value="SMS" Selected="True">SMS</asp:ListItem> 
    <asp:ListItem Value="MMS">MMS</asp:ListItem> 
    </asp:RadioButtonList> 

CSS：

input[type=radio], input[type=checkbox] { 
    display:none; 
    } 

    input[type=radio] + label, input[type=checkbox] + label { 
    display:inline-block; 
    margin:-2px; 
    padding: 4px 12px; 
    margin-bottom: 0; 
    font-size: 14px; 
    line-height: 20px; 
    color: #333; 
    text-align: center; 
    text-shadow: 0 1px 1px rgba(255,255,255,0.75); 
    vertical-align: middle; 
    cursor: pointer; 
    background-color: #f5f5f5; 
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6); 
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6)); 
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6); 
    background-image: -o-linear-gradient(top,#fff,#e6e6e6); 
    background-image: linear-gradient(to bottom,#fff,#e6e6e6); 
    background-repeat: repeat-x; 
    border: 1px solid #ccc; 
    border-color: #e6e6e6 #e6e6e6 #bfbfbf; 
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); 
    border-bottom-color: #b3b3b3; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0); 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); 
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); 
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); 
} 

input[type=radio]:checked + label, input[type=checkbox]:checked + label{ 
     background-image: none; 
    outline: 0; 
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); 
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); 
     background-color:#e0e0e0; 
} 

この上で私を提案してください。

Answer 1

実際、私のシステム（Firefox）で動作します。あなたのラジオとチェックボックスを別の方法で隠すだけの場合。

input[type="radio"], input[type="checkbox"] { 
position: absolute; 
z-index: -1; 
}