przywrócić domyślne atrybuty css

Question

Piszę komponent, który ma być używany na wielu stronach internetowych.

każda witryna ma własne arkusze stylów i wyświetla pewne rzeczy w inny sposób.

wszystkie moje HTML jest zawinięte w div z id: jednak

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

mój składnik jest spojrzenie spójne we wszystkich witrynach.

To jest w porządku, ponieważ stosuję stylizację do większości atrybutów w moim komponencie.

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

jednak Natknąłem witryny, która usuwa granicę ze wszystkich pól wejściowych

input {border: medium none;} 

muszę „un-zastosować” Niniejsza dyrektywa dla pól wejściowych w moim komponentu, a preferrably użyj domyślnej stylizacji przeglądarki dla wejść, ponieważ styl obramowania dla input type="text" będzie inny niż input type="button".

Jak to osiągnąć?

Answer 1

Musisz to przedefiniować.

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

Answer 2

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

Answer 3

można użyć stylów dla różnych typów wejść/

css:

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

Answer 4

Można użyć javascript, aby dodać klasę do wejścia. Oto przykład jQuery ...

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

a następnie zdefiniować 'borderMe' w arkuszu stylów (lub znacznik style)

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

Answer 5

można to zrobić teraz, ponieważ CSS2: border:initial;