Geek Answers Handbook

Restore css attributes to default

I am writing a component that will be used on several sites.

Each website has its own style sheet and displays certain things in different ways.

all my html is wrapped in a div with id:

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

my component, however, should look consistent across all sites.

this is great as I apply the style to most of the attributes in my component.

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

however, I came across a site that removes a border from all input fields

input {border: medium none;}

I need to "cancel" this directive for input fields in my component and it is preferable to use the style of browser styles for inputs, since the frame style for input type="text"should be different from input type="button".

how would you achieve this?

+5
source share
5

, CSS2: border:initial;

+3
div#myComponent input { border: 1px inset; }
+2
source

you can use styles for different types of input /

css:

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

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 the stylesheet (or style tag)

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

More articles:


All Articles