Поля checkbox разными картинками

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО InstantCMS 2.X

Для доски объявлений нужен цветной "семафорчик".

#1 17 апреля 2020 в 11:12

Для доски объявлений нужна цветная индикация состояния товара Продается, Заморожен, Продан.
Для этого применил три поля checkbox, которые включаются владельцем товара по мере необходимости.
Как для каждого поля вывести свою картинку вместо слова Да?
Может быть у кого то есть готовое решение?

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

#2 17 апреля 2020 в 11:28

.ft_fieldname{
   text-indent:-1000px;
   background:url('путь_к_картинке') no-repeat center;
}

t.me/googleindexingapi

#3 17 апреля 2020 в 13:09

.ft_fieldname{
   text-indent:-1000px;
   background:url('путь_к_картинке') no-repeat center;
}

Спасибо! А как разделить кнопки и каждой назначить свою картинку? Вместо ft_fieldname вставлять системное имя поля?
Например ft_sale?

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

Сегодня в 12:34

#4 17 апреля 2020 в 13:18

field — поле, name — имя, fieldname — имя поля
ft_sale, ft_myase, ft_moloke и т.д.

t.me/googleindexingapi

#5 17 апреля 2020 в 22:49

Что то не получается. Сделал код

 
/* Картинки для checkbox  */
 
.ft_sale{
   text-indent:-1000px;
   background:url("../images/icons/sale.png") no-repeat center;
}
.ft_hold{
   text-indent:-1000px;
   background:url("../images/icons/hold.png") no-repeat center;
}
.ft_sold{
   text-indent:-1000px;
   background:url("../images/icons/sold.png") no-repeat center;
}

Но чекбоксы как были та и остались без картинок. Что не так?

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

#6 17 апреля 2020 в 23:05

Что то не получается. Сделал код
 
/* Картинки для checkbox  */
 
.ft_sale{
   text-indent:-1000px;
   background:url("../images/icons/sale.png") no-repeat center;
}
.ft_hold{
   text-indent:-1000px;
   background:url("../images/icons/hold.png") no-repeat center;
}
.ft_sold{
   text-indent:-1000px;
   background:url("../images/icons/sold.png") no-repeat center;
}
Но чекбоксы как были та и остались без картинок. Что не так?

vikont

А пути верные?

www.tvent.ru

#7 17 апреля 2020 в 23:34

А пути верные?

Заралик

Вернее не бывают, скопировал файл с путями и вставил. Системные имена тоже.
Может быть что то перекрывает стили и его надо отключить? При отметке чекбокса, появляется слово Да или Yes в зависимости от локализации

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

#8 17 апреля 2020 в 23:48

 
#controller_wrap .field.ft_checkbox.f_sale {
    text-indent: -1000px;
    background: url(../images/icons32/medal_bronze.png) no-repeat center;
    width: 32px;
    height: 32px;
}

#9 17 апреля 2020 в 23:57

Да, всё правильно. Надо не ft_, а f_. Немного ошибся.

t.me/googleindexingapi

#10 18 апреля 2020 в 00:58

 
#controller_wrap .field.ft_checkbox.f_sale {
    text-indent: -1000px;
    background: url(../images/icons32/medal_bronze.png) no-repeat center;
    width: 32px;
    height: 32px;
}

С этим кодом у меня не все благополучно. Не только картинок не увидел, а все что под ним поломал. Но спасибо, кое что почерпнул.

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

#11 18 апреля 2020 в 01:02

Да, всё правильно. Надо не ft_, а f_. Немного ошибся.

чебурек дохлэй мыш

Точно! после исправления все заработало!

.f_sale{
   text-indent:-1000px;
   background:url("../images/icons32/sale.png") no-repeat center;
    height: 32px;
    margin: 5 0 0 0;
    padding: 0;
}
.f_hold{
   text-indent:-1000px;
   background:url("../images/icons32/hold.png") no-repeat center;
    height: 32px;
    margin: 5 0 0 0;
    padding: 0;
}
.f_sold{
   text-indent:-1000px;
   background:url("../images/icons32/sold.png") no-repeat center;
    height: 32px;
    margin: 5 0 0 0;
    padding: 0;
}

Попробовал управлять положением но не получилось. Результат такой

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

#12 19 апреля 2020 в 20:27

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

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

Стена пользователя

Простой запуск PHP скриптов

Поля checkbox разными картинками

Похожие темы

[ЕСТЬ РЕШЕНИЕ] Alt ко всем загружаемым картинкам

[ЕСТЬ РЕШЕНИЕ] Картинка для попривлечения внимания в постах ссылкой

У кого черный пояс по CSS - подскажите, как работать с элементами checkbox-ов

Список контента с разными пресетами

[ЕСТЬ РЕШЕНИЕ] Дубли страниц фотоальбома

Есть ли шаблон с разным выводом колонок в строке?

InstantCMS Team

О проекте

Поддержка

Дополнения