восстановите атрибуты CSS по умолчанию
я пишу компонент, который должен использоваться через несколько веб-сайтов.
каждый веб-сайт имеет свои собственные таблицы стилей и отображает определенные вещи по-другому.
весь мой HTML перенесен в отделении с идентификатором:
<div id="myComponent">...</div>
мой компонент однако должен выглядеть последовательным через все сайты.
это прекрасно, поскольку я применяю моделирование к большинству атрибутов в моем компоненте.
div#myComponent p {font-size:11px;} etc
однако я столкнулся с сайтом, который удаляет границу из всех полей ввода
input {border: medium none;}
я должен 'не применить' эту директиву для полей ввода в моем компоненте и предпочтительно использовать значение по умолчанию браузера, разрабатывающее для исходных данных как стиль границ для input type="text" должен будет отличаться от input type="button".
как Вы достигли бы этого?
4 ответа
Вам нужно переопределить его.
https://developer.mozilla.org/en/Common_CSS_Questions#Restoring_the_default_property_value
Вы можете использовать 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>
вы можете использовать стили для различных типов ввода/
css :
div#myComponent input[type=text] { border:dashed 1px #ccc;}
div#myComponent input[type=button] { border:solid 1px #999;}