Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Адовые чекбоксы

Обсуждение темы Адовые чекбоксы в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Здрасте. В css/html/javascript я профан полный. Понадобилось мне зафигарить чекбоксы как картинки. Чутка цсс и лейблов и о чудо все работало. Но когда ...


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

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

А вот и код -
Код HTML:
<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 минуту

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

Последний раз редактировалось mmatvey; 29.05.2015 в 08:40.. Причина: Добавлено сообщение
 
Старый 29.05.2015, 08:40
Ссылки
Старый 29.05.2015, 08:40
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Адовые клиенты radius Кальянная 2 11.10.2011 11:15


Текущее время: 23:17. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум