Как это лучше реализовать?

Question

[Sakhalinex]

Как лучше реализовать круги с цветами и квадраты с размером одежды? Через after и before нормально будет?

Comments

[DaBags]

Можно и через after и before, а можно через обычный border (по крайней мере для размера одежды это будет сделать много проще через border). Пример: https://jsfiddle.net/1u62Lcx8/

[Sakhalinex]

DaBags, Спасибо

Answer 1

[Ivan Bogachev]

Для квадратов с размером одежды - можно просто border сделать. Круги можно нарисовать с помощью radial-gradient() в фоне, без создания дополнительных элементов (чередуя цвет и прозрачность по мере удаления от центра).

В таких переключателях не так важно, как вы их сверстаете, важна доступность. И вот тут самая сложность и кроется. В этом маленьком компоненте нужно подумать про поддержку клаиатуры, подумать про то, что читалки должны понимать, что это radio-инпут и здесь что-то выбирается, ну и должны быть по крайней мере очевидные изменения во внешнем виде на :hover/:focus и выделение выбранного варианта. Последнее решается с дизайнером. А про первые два - полезно загуглить для своего развития, даже если ваш заказчик/начальник скажет, что "денег нет, но вы [пользователи с ограниченными возможностями] держитесь".

Comments

[Sakhalinex]

Спасибо