Головна > Мода та стиль >

Як змінити колір маркерів html. Як зробити, щоб колір маркерів у списку відрізнявся від кольору тексту? Як змінити колір булітів за допомогою CSS



Змінити колір маркерів у HTML-списку без використання діапазону (6)

Для мене найкращим варіантом є використання псевдоелементів CSS, тому для кулі disc це буде виглядати так:

ul ( list-style-type: none; ) li ( position: relative; ) li:before ( content: ""; display: block; position: absolute; width: 5px; /* adjust to suit your needs */ height: 5px;/* adjust to suit your needs */ border-radius: 50%;left: -15px; / )

  • first
  • second
  • third

  • width і height повинні мати рівні значення, щоб утримувати вказівники округлими
  • ви можете встановити border-radius рівним нулю, якщо ви хочете мати square кулі

Для більш стилів кулі можна використовувати інші css-форми https://css-tricks.com/examples/ShapesOfCSS/ (виберіть це, для якого не потрібні псевдоелементи, наприклад, трикутники)

Мені було цікаво, чи є спосіб змінити колір на кулі у списку.

У мене є список:

  • House
  • Garden

Неможливо вставити щось у li, наприклад, span і p. Чи можу я змінити колір куль, але не текст у якийсь розумний спосіб?

Якщо ви можете використати зображення, ви можете це зробити. І без зображення ви не зможете змінити колір лише кулі, а не текст.

Використання зображення

Li (list-style-image: url(images/yourimage.jpg); )

Без використання зображення

Потім вам потрібно відредагувати розмітку HTML і включити проліт у списку і пофарбувати і діапазон з різними кольорами.

Мені теж дуже сподобалася відповідь Марка - мені потрібен набір різних кольорових UL, і, очевидно, було б простіше використовувати клас. Ось що я використав для апельсина, наприклад:

Ul.orange ( list-style: none; padding: 0px; ) ul.orange > li:before ( content: "\25CF "; font-size: 15px; color: #F00; margin-right: 10px; padding: 0px line-height: 15px;

Крім того, я виявив, що шістнадцятковий код, який я використав для «content:», був іншим, ніж у Marc's (це шестигранне коло здавалося надто високим). Той, який я використав, здається, сидить зовсім посередині. Я також знайшов кілька інших постатей (квадрати, трикутники, кола тощо. буд.)

Ми можемо комбінувати list-style-image із svg s, який ми можемо вбудувати в css! Цей метод пропонує неймовірний контроль над «кулями», які можуть стати чим завгодно.

Щоб отримати червоне коло, просто використовуйте наступний css:

"); }

Але це лише початок. Це дозволяє нам робити будь-яку божевільну річ, яку ми хочемо з цими кулями. кола або прямокутники легко, але все, що ви можете намалювати за допомогою svg, можете зайти туди! Перегляньте приклад яблучного яблука нижче:

ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul.bulls-eye ( list-style-image: url("data:image/svg+xml, "); ) ul.multi-color ( list-style-image: url("data:image/svg+xml, "); }

  • Big circles!
    • Big rectangles!
    • b
      • Невеликі circles!
      • c
        • Невеликі rectangles!
  • Bulls
  • eyes.
  • Multi
  • color

Ширина/висота атрибутів

Для деяких браузерів потрібні атрибути width і height які мають бути встановлені на , або вони нічого не відображають. На момент написання цієї статті останні версії Firefox демонструють цю проблему. Я встановив обидва атрибути в прикладах.

Кодування

Побудова обох рішень @Marc та @jessica - це рішення, яке я використовую:

Li ( position:relative; ) li:before ( content:""; display: block; position: absolute; width: 6px; height:6px; border-radius:6px; left: -20px; top: .5em; background- color: #000;

Я використовую em для розмірів шрифту, тому якщо ви встановили top значення в.5em воно завжди буде поміщено в середину вашого першого рядка тексту. Я використав left:-20px тому що це є позиція left:-20px за замовчуванням у браузерах: parent padding/2

Я знаю, що це дійсно, дійсно, старе питання, але я грав із цим і придумав спосіб, якого я не бачив. Дайте списку колір, а потім перезапишіть колір тексту за допомогою::first-line селектора::first-line . Я не експерт, тому, можливо, щось не таке з цим підходом, що мені не вистачає, але, схоже, він працює.

li ( color: blue; ) li::first-line ( color: black; )

  • House
  • Garden

У цій статті підручника мова піде про роботу зі списками CSS, ви навчитеся змінювати тип маркера, розташування маркера щодо елемента списку, створювати власні маркери і навіть змінювати колір маркера.

Думаю, ви вже знаєте, що в HTML 5 застосовується два основні види списків (якщо не брати до уваги списки описів та елементи меню):

Статті на тему:
2 вікові особливості обміну речовин та енергії

Під обміном речовин розуміється сукупність змін, які...

Будуємо шлях до свого успіху

Чи всі засоби хороші на шляху досягнення мети? Ми звикли чути...

Вчимося протистояти чужій агресії

Агресивна поведінка в ряді випадків може виступати як прояв...

Вибір читачів





Популярні статті





gastroguru 2017