创建几个表单,我按照我希望他们看的方式设置文本输入和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;
}
答案 0 :(得分:2)
使用:
input[type=radio], input[type=checkbox] {
// Reset attributes here
}
或者在CSS的其余部分使用比input
更具体的选择器。
答案 1 :(得分:1)
如果要为除复选框和收音机之外的所有输入设置样式,您将使用此选择器:
input:not([type="checkbox"]):not([type="radio"])
我相信您会发现还有其他输入类型,您也希望在其未处理状态下离开(特别是date
和time
集合)。就个人而言,我只设置了 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。