Изображение вместо радио кнопки / текста? - PullRequest
Новая
       10

Изображение вместо радио кнопки / текста?

2 голосов
/ 04 января 2011

У меня есть выбор радиобокса с 9 опциями, я хотел бы заменить кнопку и текст рядом с ней изображением.

При выборе будет показан диапазон образцов цвета из 4 цветов:

  • Все
  • Черный
  • Синий
  • Шоколад
  • Слива
  • Зеленый
  • Оранжевый
  • Магнолия
  • Вудс

Поэтому мне нужно изображение стрелки рядом с выбранным параметром, а затем цветовой диапазон рядом с ним, если параметр не выбран.стрелка не нужна (или, наоборот, неактивная стрелка).

Насколько это легко?

Ответы [ 2 ]

1 голос
/ 04 января 2011

Вы можете сделать что-то вроде этого:

  • скрыть переключатель, поставить стрелку img после него, либо скрыть
  • определите другой img (который заменяет текст) как label для переключателя
  • с помощью псевдоселектора :checked и соседнего селекторного элемента (+) вы можете отобразить стрелку img, когда установлен переключатель

Для этого решения вам не нужен Javascript, только HTML и CSS (и, насколько я помню, IE6 не будет понимать используемые селекторы, поэтому вам придется вернуться к обычному переключателю).

ОБНОВЛЕНИЕ : IE6 <будет обрабатывать <code>+, но только IE8 <будет обрабатывать <code>:checked. Я также создал быстрый тестовый пример, который переключается на переключатели по умолчанию, если свойства не поддерживаются: 

<style type="text/css">
    ul,li { margin: 0; padding: 0; list-style: none; }
    .stuffed_radio:enabled { display: none; }
    .stuffed_arrow { display: none; }
    .stuffed_radio:enabled+.stuffed_arrow { visibility: hidden; display: inline-block; }
    .stuffed_radio:checked+.stuffed_arrow { visibility: visible; }
</style>

<ul>
<li>
<input type="radio" id="radio_1" name="baz" class="stuffed_radio" />
<img src="arrow.png" alt="" class="stuffed_arrow" />
<label for="radio_1"><img src="stuff_1.png" alt="" class="stuffed_image" /></label>
</li>
<li>
...
</li>
</ul>
1 голос
/ 04 января 2011

Существует множество библиотек для замены переключателей.Например, "FancyForm" Lipidity (к сожалению, теперь помечен как "устаревший" из-за необработанных возможностей CSS).

...