3

いくつかのフォームを作成し、テキスト入力とテキストエリアを希望どおりにスタイル設定しました。ラジオ ボタンとチェックボックスにたどり着きましたが、これらは他の入力のスタイルを自然に継承しています。

これをリセットしてデフォルトのスタイルに戻す方法はありますか? 私は実際にこの問題に遭遇したことはありません。css または html ソリューションのみを探しています。

これが何が起こっているかの写真です： http://i.imgur.com/pAic3.jpg

これが私の関連するcssです

/* style drop down box */
#panel_body select {
    width:243px;
    height:40px;
    border:1px solid #9b9b9b;
    border-radius:8px;
}

/* style input elements */
#panel_body input, #panel_body textarea {
    width:243px;
    height:40px;
    border:1px solid #9b9b9b;
    border-radius:8px;
    background: -webkit-linear-gradient(top, #ffffff, #adadad);
    background: -moz-linear-gradient(top, #ffffff, #adadad);
    background: -o-linear-gradient(top, #ffffff, #adadad);
    background: -ms-linear-gradient(top, #ffffff, #adadad);
    background: linear-gradient(top, #ffffff, #adadad);
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
 StartColorStr='#FFffff', EndColorStr='#adadad');

}

/* style textareas */
#panel_body textarea {
    box-sizing: border-box;
    ms-box-sizing: border-box;
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
    height:100px;
    padding:5px;
    font-family: Calibri, Arial, sans-serif;
}

/* input elements hover and select state */
#panel_body input:hover, #panel_body textarea:hover,  
#panel_body input:focus, #panel_body textarea:focus {  
    border-color: #025389;  
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;  
    }
4

3 に答える 3

2

使用する：

input[type=radio], input[type=checkbox] {
    // Reset attributes here
}

inputまたは、CSS の残りの部分よりも具体的なセレクターを使用します。

于 2012-12-20T18:22:12.753 に答える
1

チェックボックスとラジオを除くすべての入力のスタイルを設定する場合は、次のセレクターを使用します。

input:not([type="checkbox"]):not([type="radio"])

http://jsfiddle.net/29CTy/

スタイルを設定していない状態のままにしたい入力タイプが他にもあることに気付くと思います (特にdateandtimeコレクション)。個人的には、テキストタイプの入力のみスタイルを設定します。そのリストは通常​​、スタイルを付けないままにしたいタイプのリストよりも短いためです。

input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]
于 2012-12-20T18:31:27.747 に答える
0

#panel_body input[type="text"],#panel_body textareaテキストボックスとテキストエリアにcssを追加するために使用します

そして、チェックボックスとラジオボタンにcssを追加するためにinput[type="radio"]andを使用します。input[type="checkbox"]

于 2012-12-20T18:25:56.140 に答える