重置收音机和复选框上的样式,但保留其他输入样式

时间:2012-12-20 18:17:02

标签: html css

创建几个表单,我按照我希望他们看的方式设置文本输入和textareas的样式。我现在正在使用单选按钮和复选框,他们自然地继承了其他输入的样式。

有没有办法重置这个并将它们恢复为默认样式?我从来没有遇到过这个问题。只寻找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;  
    }

3 个答案:

答案 0 :(得分:2)

使用:

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

或者在CSS的其余部分使用比input更具体的选择器。

答案 1 :(得分:1)

如果要为复选框和收音机之外的所有输入设置样式,您将使用此选择器:

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

http://jsfiddle.net/29CTy/

我相信您会发现还有其他输入类型,您也希望在其未处理状态下离开(特别是datetime集合)。就个人而言,我只设置了 texty 类型的输入,因为该列表通常比我希望保持原样的类型列表短:

input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]

答案 2 :(得分:0)

使用#panel_body input[type="text"],#panel_body textarea在文本框和textarea上添加css

使用input[type="radio"]input[type="checkbox"]在复选框和单选按钮上添加css。