#search-box {
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
background-color:#ffffff;
border:0px solid #CCCCCC;
float:right;
padding:8px;
position:relative;
top:0;
width:20em;
}
#search-box {
/*remove all css attributes here*/
}
views:
27answers:
3
+3
A:
You can't remove all attributes. You should be more specific in your first rule so that it only targets those elements that you desire. Either that or you need to explicitly set the values that you want on the second rule.
Keith Rousseau
2010-02-03 14:26:42
+3
A:
You can't. You would have to manually reset each of them. If you need to jump between major differences, when a user clicks the element, for instance, you can remove these from the element itself, and put them in a class. So this:
#search-box {
color:blue;
}
Becomes this:
#search-box {
color:red;
}
#search-box.focused {
color:blue;
}
Now any time you need to make radical changes to the display of an element, add or remove the .focused
class.
Jonathan Sampson
2010-02-03 14:27:02
Or use pseudo class like ":focus"
erenon
2010-02-03 14:37:33
@erenon: pseudo classes on non-anchors aren't as widely supported.
Jonathan Sampson
2010-02-03 15:31:07
+1
A:
The question makes much more sense, if you use classes;
HTML:
<div id="site-search-box" class="search-box">
Then reset the attributes, e.g:
CSS:
#site-search-box {
position: static;
padding: 0;
width: auto;
}
erenon
2010-02-03 14:28:51