БРАУЗЕРЫ ИМЕЮТ СВОИ СТИЛИ
По умолчанию каждый браузер определяет свой собственный стиль css для всех общих элементов. Это будет включать базовые цвета, фоны, отступы, поля и т. Д. c.
ПОЧЕМУ?
Поставщики браузеров делают это, поэтому у них всегда есть запасной вариант на случай, если вы не в состоянии указать определенные свойства. Например, если вы никогда не устанавливали цвет тела и фон, должен ли браузер ничего не отображать?
УПРАВЛЕНИЕ НАЗАД
Обычная практика для обработки этого типа поведения заключается в том, чтобы инициировать CSS сброс в начале таблицы стилей, чтобы установить общие c атрибуты и «сброс» браузером по умолчанию. Это очень популярно, потому что не все браузеры используют одинаковые значения по умолчанию, этот метод является хорошим способом, который позволяет не только определить свои значения по умолчанию, но и обеспечить согласованный стиль по умолчанию для всех браузеров.
Вот пример Эри c Мейер CSS Сброс (Один из пионеров этой техники.)
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
В вашем ответе на ваш точный запрос.
Вы можете просто установить свойство inherit для элементов, к которым хотите применить стили тела.
button,
select,
option {
background-color: inherit;
color: inherit;
}
body {
background-color: black;
color: white;
}
select {
height: 5em;
}
button,
select,
option {
background-color: inherit;
color: inherit;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
This is text in the body.
<div>This is text in a div
<div>This is text in a nested div</div>
</div>
<form>
This is text in a form.
<button>This is text in a button</button>
<button>This is text in a button with inline style</button>
<select multiple>
<option>This is text in a select option</option>
<option>This is text in a another select option</option>
<option>This is text in a yet another select option</option>
</select>
</form>
</body>
</html>