Найти на сайте
  2. Форумы
  3. МАСТЕРСКАЯ
  4. HTML / CSS / PHP / JS / RegExp
  5. Поля checkbox разными картинками

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

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

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

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


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

чебурек дохлэй мыш
Спасибо! А как разделить кнопки и каждой назначить свою картинку? Вместо ft_fieldname вставлять системное имя поля?
Например ft_sale?
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей
0
#4 17 апреля 2020 в 13:18
field — поле, name — имя, fieldname — имя поля
ft_sale, ft_myase, ft_moloke и т.д.
t.me/googleindexingapi
0
#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. }
Но чекбоксы как были та и остались без картинок. Что не так?
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей
0
#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

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


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

Заралик
Вернее не бывают, скопировал файл с путями и вставил. Системные имена тоже.
Может быть что то перекрывает стили и его надо отключить? При отметке чекбокса, появляется слово Да или Yes в зависимости от локализации
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей
0
#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.  
0
#9 17 апреля 2020 в 23:57
Да, всё правильно. Надо не ft_, а f_. Немного ошибся.
t.me/googleindexingapi
0
#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
С этим кодом у меня не все благополучно. Не только картинок не увидел, а все что под ним поломал. Но спасибо, кое что почерпнул.
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей
0
#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. }
Попробовал управлять положением но не получилось. Результат такой
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей
0
#12 19 апреля 2020 в 20:27
Вопрос решен, желающих что то добавить нет. Тему закрываю.
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей
0
Стена пользователя
Простой запуск PHP скриптов

Похожие темы

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

HTML / CSS / PHP / JS / RegExp Создана 3 года назад 9 сообщений

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

Виджеты, компоненты, плагины, модули Создана 1 год назад 3 сообщения

[ЕСТЬ РЕШЕНИЕ] На странице Регистрации изменить вывод Группы

HTML / CSS / PHP / JS / RegExp Создана 4 года назад 3 сообщения

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

HTML / CSS / PHP / JS / RegExp Создана 3 года назад 7 сообщений

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

Дизайн / Графика / Искусство Создана 4 года назад 16 сообщений

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

Сайт и форум проекта Создана 2 года назад 8 сообщений

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.