tags:

views:

27

answers:

3
#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*/
}
+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
+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
Or use pseudo class like ":focus"
erenon
@erenon: pseudo classes on non-anchors aren't as widely supported.
Jonathan Sampson
+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