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

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

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

#1 17 апреля 2020 в 11:12
Для доски объявлений нужна цветная индикация состояния товара Продается, Заморожен, Продан.
Для этого применил три поля checkbox, которые включаются владельцем товара по мере необходимости.
Как для каждого поля вывести свою картинку вместо слова Да?
Может быть у кого то есть готовое решение?
#2 17 апреля 2020 в 11:28
  1. .ft_fieldname{
  2. text-indent:-1000px;
  3. background:url('путь_к_картинке') no-repeat center;
  4. }
#3 17 апреля 2020 в 13:09


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

чебурек дохлэй мыш
Спасибо! А как разделить кнопки и каждой назначить свою картинку? Вместо ft_fieldname вставлять системное имя поля?
Например ft_sale?
#4 17 апреля 2020 в 13:18
field — поле, name — имя, fieldname — имя поля
ft_sale, ft_myase, ft_moloke и т.д.
#5 17 апреля 2020 в 22:49
Что то не получается. Сделал код
  1.  
  2. /* Картинки для checkbox */
  3.  
  4. .ft_sale{
  5. text-indent:-1000px;
  6. background:url("../images/icons/sale.png") no-repeat center;
  7. }
  8. .ft_hold{
  9. text-indent:-1000px;
  10. background:url("../images/icons/hold.png") no-repeat center;
  11. }
  12. .ft_sold{
  13. text-indent:-1000px;
  14. background:url("../images/icons/sold.png") no-repeat center;
  15. }
Но чекбоксы как были та и остались без картинок. Что не так?
#6 17 апреля 2020 в 23:05


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

  1.  
  2. /* Картинки для checkbox */
  3.  
  4. .ft_sale{
  5. text-indent:-1000px;
  6. background:url("../images/icons/sale.png") no-repeat center;
  7. }
  8. .ft_hold{
  9. text-indent:-1000px;
  10. background:url("../images/icons/hold.png") no-repeat center;
  11. }
  12. .ft_sold{
  13. text-indent:-1000px;
  14. background:url("../images/icons/sold.png") no-repeat center;
  15. }
Но чекбоксы как были та и остались без картинок. Что не так?

vikont

А пути верные?
#7 17 апреля 2020 в 23:34


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

Заралик
Вернее не бывают, скопировал файл с путями и вставил. Системные имена тоже.
Может быть что то перекрывает стили и его надо отключить? При отметке чекбокса, появляется слово Да или Yes в зависимости от локализации
#8 17 апреля 2020 в 23:48
  1.  
  2. #controller_wrap .field.ft_checkbox.f_sale {
  3. text-indent: -1000px;
  4. background: url(../images/icons32/medal_bronze.png) no-repeat center;
  5. width: 32px;
  6. height: 32px;
  7. }
  8.  
#9 17 апреля 2020 в 23:57
Да, всё правильно. Надо не ft_, а f_. Немного ошибся.
#10 18 апреля 2020 в 00:58


  1.  
  2. #controller_wrap .field.ft_checkbox.f_sale {
  3. text-indent: -1000px;
  4. background: url(../images/icons32/medal_bronze.png) no-repeat center;
  5. width: 32px;
  6. height: 32px;
  7. }
  8.  

Dmitriy Barinov
С этим кодом у меня не все благополучно. Не только картинок не увидел, а все что под ним поломал. Но спасибо, кое что почерпнул.
#11 18 апреля 2020 в 01:02


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

чебурек дохлэй мыш
Точно! после исправления все заработало!
  1. .f_sale{
  2. text-indent:-1000px;
  3. background:url("../images/icons32/sale.png") no-repeat center;
  4. height: 32px;
  5. margin: 5 0 0 0;
  6. padding: 0;
  7. }
  8. .f_hold{
  9. text-indent:-1000px;
  10. background:url("../images/icons32/hold.png") no-repeat center;
  11. height: 32px;
  12. margin: 5 0 0 0;
  13. padding: 0;
  14. }
  15. .f_sold{
  16. text-indent:-1000px;
  17. background:url("../images/icons32/sold.png") no-repeat center;
  18. height: 32px;
  19. margin: 5 0 0 0;
  20. padding: 0;
  21. }
Попробовал управлять положением но не получилось. Результат такой
#12 19 апреля 2020 в 20:27
Вопрос решен, желающих что то добавить нет. Тему закрываю.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.