[mmatvey]

Здрасте.
В css/html/javascript я профан полный. Понадобилось мне зафигарить чекбоксы как картинки. Чутка цсс и лейблов и о чудо все работало. Но когда вставляю код в вордпресс.ТО вся фигня работает не коректно. =(.
Цсс вставляю в главный цсс файл менюху на отдельную страничку.
Все генерится правильно,только картинки не показывает =(. Вопрос почему?
Я так понимаю не корректно работает background:url() в css.
Есть альтернативные варианты реализовать тоже самое?

Не рабочий пример тут - http://vanga.vsamolete.com/?page_id=18

А вот и код -

<style>
input[type=checkbox] {
    display:none;
  }

  input[type=checkbox] + label.battery
   {
       background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/battery.jpg") #343434;
background-size: 100% 100%;
       height: 100px;
       width: 100px;
       display:inline-block;
       padding: 0 0 0 0px;
   }

   input[type=checkbox]:checked + label.battery
    {
        background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/battery_press.jpg") red;
background-size: 100% 100%;
        height: 100px;
        width: 100px;
        display:inline-block;
        padding: 0 0 0 0px;
    }

   input[type=checkbox]:hover + label.battery
    {
        background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/battery_press.jpg") red;
background-size: 100% 100%;
        height: 100px;
        width: 100px;
        display:inline-block;
        padding: 0 0 0 0px;
    }
  input[type=checkbox] + label.proc
   {
       background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/proc.jpg") #343434;
background-size: 100% 100%;
       height: 100px;
       width: 100px;
       display:inline-block;
       padding: 0 0 0 0px;
   }

   input[type=checkbox]:checked + label.proc
    {
        background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/proc_press.jpg") red;
background-size: 100% 100%;
        height: 100px;
        width: 100px;
        display:inline-block;
        padding: 0 0 0 0px;
    }

   input[type=checkbox]:hover + label.proc
    {
        background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/proc_press.jpg") red;
background-size: 100% 100%;
        height: 100px;
        width: 100px;
        display:inline-block;
        padding: 0 0 0 0px;
    }
  input[type=checkbox] + label.screen
   {
       background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/screen.jpg") #343434;
background-size: 100% 100%;
       height: 100px;
       width: 100px;
       display:inline-block;
       padding: 0 0 0 0px;
   }

   input[type=checkbox]:checked + label.screen
    {
        background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/screen_press.jpg") red;
background-size: 100% 100%;
        height: 100px;
        width: 100px;
        display:inline-block;
        padding: 0 0 0 0px;
    }

   input[type=checkbox]:hover + label.screen
    {
        background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/screen_press.jpg") red;
background-size: 100% 100%;
        height: 100px;
        width: 100px;
        display:inline-block;
        padding: 0 0 0 0px;
    }
  input[type=checkbox] + label.design
   {
       background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/design.jpg") #343434;
background-size: 100% 100%;
       height: 100px;
       width: 100px;
       display:inline-block;
       padding: 0 0 0 0px;
   }

   input[type=checkbox]:checked + label.design
    {
        background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/design_press.jpg") red;
background-size: 100% 100%;
        height: 100px;
        width: 100px;
        display:inline-block;
        padding: 0 0 0 0px;
    }

   input[type=checkbox]:hover + label.design
    {
        background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/design_press.jpg") red;
background-size: 100% 100%;
        height: 100px;
        width: 100px;
        display:inline-block;
        padding: 0 0 0 0px;
    }
  input[type=checkbox] + label.sd
   {
       background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/sd.jpg") #343434;
background-size: 100% 100%;
       height: 100px;
       width: 100px;
       display:inline-block;
       padding: 0 0 0 0px;
   }

   input[type=checkbox]:checked + label.sd
    {
        background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/sd_press.jpg") red;
background-size: 100% 100%;
        height: 100px;
        width: 100px;
        display:inline-block;
        padding: 0 0 0 0px;
    }

   input[type=checkbox]:hover + label.sd
    {
        background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/sd_press.jpg") red;
background-size: 100% 100%;
        height: 100px;
        width: 100px;
        display:inline-block;
        padding: 0 0 0 0px;
    }
  input[type=checkbox] + label.camera
   {
       background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/camera.jpg") #343434;
background-size: 100% 100%;
       height: 100px;
       width: 100px;
       display:inline-block;
       padding: 0 0 0 0px;
   }

   input[type=checkbox]:checked + label.camera
    {
        background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/camera_press.jpg") red;
background-size: 100% 100%;
        height: 100px;
        width: 100px;
        display:inline-block;
        padding: 0 0 0 0px;
    }

   input[type=checkbox]:hover + label.camera
    {
        background:url("http://vanga.vsamolete.com/wp-content/uploads/2015/05/camera_press.jpg") red;
        background-size: 100% 100%;
        height: 100px;
        width: 100px;
        display:inline-block;
        padding: 0 0 0 0px;
    }
</style>
<table bgcolor="#343434">
<tbody>
<tr>
<td><input type='checkbox' name='battery' value='valuable' id="battery" class="battery"/><label for="battery" class="battery"></label></td>
<td><input type='checkbox' name='battery' value='valuable' id="camera" class="battery"/><label for="camera" class="camera"></label></td>
<td><input type='checkbox' name='battery' value='valuable' id="proc" class="battery"/><label for="proc" class="proc"></label></td>
<td><input type='checkbox' name='battery' value='valuable' id="design" class="battery"/><label for="design" class="design"></label></td>
<td><input type='checkbox' name='battery' value='valuable' id="screen" class="battery"/><label for="screen" class="screen"></label></td>
<td><input type='checkbox' name='battery' value='valuable' id="sd" class="sd"/><label for="sd" class="sd"></label></td>
</tr>
<tr>
<td style="text-align: center;"><span style="color: #ffffff;">Battery</span></td>
<td style="text-align: center;"><span style="color: #ffffff;">Camera</span></td>
<td style="text-align: center;"><span style="color: #ffffff;">Processor</span></td>
<td style="text-align: center;"><span style="color: #ffffff;">Design</span></td>
<td style="text-align: center;"><span style="color: #ffffff;">Screen</span></td>
<td style="text-align: center;"><span style="color: #ffffff;">SDCard</span></td>
</tr>
</tbody>
</table>

Добавлено через 2 часа 28 минут

Решил Сделать просто таблицу с ховером прозрачной картинкой и растенуть невидимый чекбокс по ячейке. Вопрос - Можно ли поменять бэкграунд в ячейке на клик без Javascript, а чистым CSS?
Пробовал table.menu:active {} не сработало =(((((. Да и переключить в исходный цвет не получиться. =(((
Смысл, чтобы ячейка работала как чекбокс и меняла цвет check\uncheck\hover

Добавлено через 3 часа 31 минуту

Все пофиксил =)