javascript - working - bootstrap tooltip js



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

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

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

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

UPDATE : IE6 <будет обрабатывать + но только IE8 <будет обрабатывать :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>

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

Выделите диапазон цветов для 4 цветов:

  • Все
  • черный
  • синий
  • Шоколад
  • слива
  • зеленый
  • оранжевый
  • магнолия
  • Woods

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

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


Answer #1

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





radio-button