Как стилизовать элемент details с помощью CSS3?

Несколько способов стилизовать элемент details с помощью CSS:

• Установка границ, отступов и фоновых цветов. www.sitepoint.com www.techsyncer.com Например, можно задать границы элемента, отступы и небольшой радиус границы: www.sitepoint.com

details { padding: 10px; border: 5px solid #f7f7f7; border-radius: 3px; }                                                                           www.sitepoint.com                      

• Настройка маркера. metanit.com По умолчанию элемент summary в качестве маркера скрытости/раскрытости использует символ треугольника. metanit.com Его можно настроить, например, убрать с помощью свойства list-style и дополнительных свойств типа list-style-type или list-style-image. metanit.com

• Установка эффектов наведения. www.techsyncer.com Можно задать различные эффекты наведения на элементе details. www.techsyncer.com Например, изменить фон при наведении курсора: www.sitepoint.com

details { transition: 0.2s background linear; } details:hover { background: #dad3b1; }                                                                           www.techsyncer.com                      

• Оформление заголовка внутри summary. www.techsyncer.com Если разработчик размещает элемент заголовка внутри summary, то по умолчанию заголовок располагается на строке ниже стрелки. www.techsyncer.com Чтобы исправить это, можно установить для заголовка значение display: inline или display: inline-block. www.techsyncer.com

• Использование селектора атрибута. www.internet-technologies.ru С его помощью можно указать стили для открытого состояния элемента details. www.internet-technologies.ru Например, можно переключать цвет стиля и фона заголовка при раскрытии элемента details. metanit.com Для этого используется селектор details[open]. metanit.com