восстановить атрибуты CSS по умолчанию

Question

Я пишу компонент, который будет использоваться на нескольких веб-сайтах.

каждый веб-сайт имеет свои собственные таблицы стилей и по-разному отображает определенные вещи.

весь мой html упакован в div с идентификатором:

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

Однако мой компонент должен выглядеть одинаково на всех сайтах.

Это нормально, так как я применяю стилизацию к большинству атрибутов в моем компоненте.

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

однако я наткнулся на сайт, который удаляет границу из всех полей ввода

input {border: medium none;}

Мне нужно «отменить» эту директиву для полей ввода в моем компоненте и предпочтительно использовать стиль ввода по умолчанию в браузере для ввода, поскольку стиль границы для input type="text" должен будет отличаться от input type="button".

как бы вы этого достигли?

Answer 1

Вы можете сделать это сейчас, так как CSS2: border:initial;

Answer 2

Вам нужно переопределить его.

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

Answer 3

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

Answer 4

Вы можете использовать стили для разных типов ввода /

css:

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

Answer 5

Вы можете использовать JavaScript, чтобы добавить класс для ввода. Вот пример jquery ...

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

и затем определение 'borderMe' в таблице стилей (или теге стиля)

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