Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 48 из 53 · 10 мин
accent-color, appearance, caret-color, cursor, pointer-events, user-select, resize и field-sizing.
Галочки и ползунки синие, а у нас коричневый бренд.
Одно свойство accent-color — и все галочки фирменные.
accent-color<style>
form { accent-color: #c8763a; }
</style>
<form><label><input type="checkbox" checked> С собой</label> <input type="range"></form>appearanceappearance: none — сбросить вид браузера и нарисовать свой.caret-color<style>
input { caret-color: #c8763a; }
</style>
<input value="Кликни сюда">cursorpointer, not-allowed, grab, text.<style>
span { cursor: not-allowed; background: #eee; padding: 4px; } b { cursor: grab; }
</style>
<span>Нельзя</span> <b>Тащи</b>pointer-eventspointer-events: none — клики проходят насквозь.user-selectuser-select: none — нельзя выделить; all — выделить целиком одним кликом.<style>
.code { user-select: all; background: #fdf6ec; padding: 4px; }
</style>
Промокод: <span class="code">SALE10</span>resizeresize: vertical у textarea — только по высоте.field-sizingfield-sizing: content — поле растёт с текстом.Неактивное — cursor: not-allowed, кликабельное — cursor: pointer.
Задай form accent-color: #c8763a, а textarea — resize: vertical.
Выберите один ответ.
Какое свойство красит чекбоксы и ползунки в цвет бренда?
Выберите один ответ.
Как сделать, чтобы клики проходили сквозь декоративный слой?
Проверяем состояние обучения…