упорядоченный список вопросов

Question

<ol style="float:left;display:inline">
 <li style="float:left;display:inline">
   <label style="position:relative">
     <div  style="position:absolute;left:2px;background-image:someimage.png"/>
     <input type="radio"/>
           </label>
         </li>

 <li style="float:left;display:inline">
   <label style="position:relative">
     <div  style="position:absolute;left:2px;background-image:someimage.png"/>
       <input type="radio"/>
           </label>
        </li>
</ol>

В этом коде я попытался скрыть радиокнопку за изображением (которое указано в теге div). Но это не работает. Я не хочу указывать изображение напрямую, используя тег img (который отлично работает). Любая работа вокруг, чтобы достигнуть этого?

Answer 1

Вы должны переместить переключатель за пределы родительского DIV. Я думаю, что вы хотите что-то вроде этого:

<ol>
  <li style='position:relative'>
    <input type='radio' style='position:absolute;left:0;top:0;z-index:0' />
    <div style='position:absolute;left:0;top:0;
                z-index:1;background-image:url("someimage.png")'>
      Foo          
    </div>
  </li>
</ol>

Другими вариантами являются решение @ AgentConundrum display:none (которое не позволит вам нажать кнопку и приведет к сбою пробела) или использование visibility:hidden (которое по-прежнему не позволит вам нажать кнопку, но оставит пустое место, где раньше была кнопка).

Если вы пытаетесь заменить внешний вид переключателя, существует множество быстрых решений, но они используют Javascript.

Пока я говорю о Javascript, у вас также не может быть переключателя, а просто нажмите на свой div, который может быть закодирован для использования в качестве переключателя.

В целом, вероятно, нехорошо спрятать элементы формы, которые делают что-то, так как вам придется обходить взаимодействие с ними каждый раз, когда вы захотите их использовать. Просто опустите их полностью и используйте Javascript или измените свой дизайн, чтобы включить их.

Answer 2

Если ваша цель - скрыть переключатель, почему бы вам не сделать что-то вроде

<input type="radio" class="hidden"/>

input.hidden {
  display: none;
}