restore default css attributes

Question

i'm writing a component that is to be used across multiple websites.

each website has it's own stylesheets and displays certain things differently.

all of my html is wrapped within a div with an id:

<div id="myComponent">...</div>

my component however is to look consistent across all of the sites.

this is fine as i apply styling to most of the attributes in my component.

div#myComponent p {font-size:11px;} etc

however i've come across a site that removes the border from all input fields

input {border: medium none;}

i need to 'un-apply' this directive for the input fields within my component, and preferrably use the browser's default styling for inputs, as the border style for input type="text" will need be different to input type="button".

how would you achieve this?

Answer 1

You can do it now since CSS2: border:initial;

Answer 2

You'd need to redefine it.

https://developer.mozilla.org/en/Common_CSS_Questions#Restoring_the_default_property_value

Answer 3

div#myComponent input { border: 1px inset; }

Answer 4

you can use styles for different input types/

css :

div#myComponent input[type=text] { border:dashed 1px #ccc;} 
div#myComponent input[type=button] { border:solid 1px #999;} 

Answer 5

You can use javascript to add a class to the input. Here is a jquery example...

<script type = "text/javascript">
    $(function(){
        $("#myComponent input[type=text]").addClass("borderMe");
    }); 
</script>

and then define 'borderMe' in a stylesheet (or style tag)

<style type = "text/css">
.borderMe
{
    border:solid 2px black;
}
</style>