ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS вопрос по псевдо классу checked
13 сообщений из 13, страница 1 из 1
CSS вопрос по псевдо классу checked
    #39927069
Nick-name
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Nick-name
Участник
Здравствуйте, помогите пожалуйста. Я не верстальщик и о верстке почти ничего не знаю, по этому прошу прощения за непонимание простых вещей.
Я делаю кастомные чекбоксы, вроде все неплохо получается но вот беда, галочка в чекбоксе не проставляется.
html выглядит так
Код: sql
1.
2.
3.
4.
<label class="check__label">
      <input type="checkbox" id="links-available" class="check__input" name="Links[available]" value="1"> 
      в наличии
</label>


класс check__input выгляди так
Код: sql
1.
2.
3.
4.
5.
.check__input{
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
}



класс с поставленной галочки выглядит так
Код: sql
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
.check__label:after{
    content: '';
    display: block;
    height: 16px;
    width: 16px;
    background-color: #FFF;
    background:url("../img/icons8-windows-metro-50.svg") no-repeat;
    background-size: 14px 14px;
    opacity: 0;
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 2;
}


кусочек который должен делать галочку видимой выглядит так
Код: sql
1.
2.
3.
.check__input:checked + .check__label:after {
    opacity: 1;
}


И вот этот кусочек не работает, тестирую в chrome и firefox, галка не ставится
Подскажите где ошибаюсь
...
Рейтинг: 0 / 0
15.02.2020, 22:10
| Ответить | Цитировать | Написать  
CSS вопрос по псевдо классу checked
    #39927073
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Nick-name,

https://jsfiddle.net/2vdz3ng8/

а почему она должна проставляться? по какому событию?
...
Рейтинг: 0 / 0
15.02.2020, 22:35
| Ответить | Цитировать | Написать  
CSS вопрос по псевдо классу checked
    #39927078
Nick-name
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Nick-name
Участник
вадя,

Ну как я понял вот по этому .check__input:checked
то есть когда я тыкаю на чекбокс и он становится чекед, то opasiti становится 1
...
Рейтинг: 0 / 0
15.02.2020, 22:41
| Ответить | Цитировать | Написать  
CSS вопрос по псевдо классу checked
    #39927079
Nick-name
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Nick-name
Участник
Вернее opacity )))
Но как я говорил, ранее я плохо понимаю как это все работает
...
Рейтинг: 0 / 0
15.02.2020, 22:43
| Ответить | Цитировать | Написать  
CSS вопрос по псевдо классу checked
    #39927082
Nick-name
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Nick-name
Участник
Воообще, чтобя понимал хоть чего я написал(вернее подсмотрел)
Существует ли checked (класс-действие не знаю как это в CSS назвается)?
Если существует, то в каком случае он инициализируется?
Если как я понял, checked инициализируется при проставлении чекбокса, то что вот это такое
Код: sql
1.
2.
3.
.check__input:checked + .check__label:after {
    opacity: 1;
}


Повторюсь, это для меня китайская грамота
...
Рейтинг: 0 / 0
15.02.2020, 22:49
| Ответить | Цитировать | Написать  
CSS вопрос по псевдо классу checked
    #39927085
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Nick-name,

тут без javasript не получится .
первоначально чекбокс не виден и поэтому по нему ты не можешь кликнуть. ты сликаешь в label.
...
Рейтинг: 0 / 0
15.02.2020, 23:07
| Ответить | Цитировать | Написать  
CSS вопрос по псевдо классу checked
    #39927089
Nick-name
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Nick-name
Участник
вадя,

хорошо, а если в label прописать for="links-available" ?
Вообще, вот ролик
YouTube Video
YouTube Video
...
Рейтинг: 0 / 0
15.02.2020, 23:15
| Ответить | Цитировать | Написать  
CSS вопрос по псевдо классу checked
    #39927090
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Nick-name,
дак там чекбокс всегда виден
...
Рейтинг: 0 / 0
15.02.2020, 23:33
| Ответить | Цитировать | Написать  
CSS вопрос по псевдо классу checked
    #39927098
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
Вот это
.check__input:checked + .check__label:after
Само по себе не верно.
Тут написано возьми элемент с классом .check__label , который следует за элементом с классом
.check__input и который отмечен (ну там еще после него надо вставить элемент)
Но у вас то не так.
Вам надо взять родительский label у отмеченного input
Средствами CSS взять родительский элемент невозможно. Нет таких селекторов.
Только скриптами искать их приходится
...
Рейтинг: 0 / 0
16.02.2020, 00:20
| Ответить | Цитировать | Написать  
CSS вопрос по псевдо классу checked
    #39927117
Nick-name
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Nick-name
Участник
voraa,

Большое спасибо, теперь хоть понятно, что не так.
...
Рейтинг: 0 / 0
16.02.2020, 08:06
| Ответить | Цитировать | Написать  
CSS вопрос по псевдо классу checked
    #39927129
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
Посмотрите тут
https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
Там приводятся методы стилизации чеков и радио.
Может чем можно будет воспользоваться
...
Рейтинг: 0 / 0
16.02.2020, 11:20
| Ответить | Цитировать | Написать  
CSS вопрос по псевдо классу checked
    #39927230
Nick-name
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Nick-name
Участник
voraa,

Спасибо большое, я уже все сделал, просто поменял местами элементы )))
...
Рейтинг: 0 / 0
16.02.2020, 21:49
| Ответить | Цитировать | Написать  
CSS вопрос по псевдо классу checked
    #39927315
SQLPowerUser
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQLPowerUser
Участник
Nick-name,

на всякий случай, варианты попроще
https://jsfiddle.net/y0x7e65p/
...
Рейтинг: 0 / 0
17.02.2020, 10:43
| Ответить | Цитировать | Написать  
13 сообщений из 13, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS вопрос по псевдо классу checked
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=11&tid=1443540]:
 0ms
get settings:
 9ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 62ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 45ms
get tp. blocked users:
 1ms
others: 235ms
total:  386ms
созд. / загр.: 386ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]