Комментарии 39
| Прогресс не стоит на месте, и теперь вы можете именовать классы как душе угодно:
Напомнило
Напомнило
+16
Ребят, подскажите как правильно стилизовать checkbox, если у меня такая верстка:
<label>
Checkbox
<input type="checkbox" name="check" />
</label>
0
А зачем чекбокс оборачивать в label?
-5
Чтоб не мучиться с id и for.
+9
По моему убеждению — это как-то нелогично, помещать инпут в подпись, несмотря на удобство.
Для такой верстки вариант всего 1: использовать селектор родительского элемента
Но с поддержкой пока плохо.
Для такой верстки вариант всего 1: использовать селектор родительского элемента
input[type=checkbox] ^ label:before {
}
input[type=checkbox]:checked ^ label:before {
}
Но с поддержкой пока плохо.
-4
Ох. Эти ваши убеждения тут на хабре видят новички. Кто-то ведь даже скопирует ваш код и будет использовать у себя.
У меня к вам большая просьба — смотрите на то, как реализуют ваши советы другие.
Например, чекбокс, скрытый с помощью
У меня к вам большая просьба — смотрите на то, как реализуют ваши советы другие.
Например, чекбокс, скрытый с помощью
display: none
будет недоступен для перехода Tab'ом. Поэтому на wtfforms.com и в других демках чекбоксы скрывают прозрачностью или иными способами.+2
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Я просто текст «Checkbox» оборачиваю в div. и стилизую уже div. Или можно вообще пустой div после input вставить и все картинки уже в него.
+2
Если не трудно набросайте пожалуйста короткий примерчик.
0
Как-то так:
<label>
Checkbox
<input type="checkbox" name="check" />
<div/>
</label>
label input[type=checkbox] + div:before {
/*как в статье*/
}
label input[type=checkbox]:checked + div:before {
/*как в статье*/
}
-1
Спасибо
0
Вот пример: jsfiddle.net/ksettzv2/1/
+2
НЛО прилетело и опубликовало эту надпись здесь
Добавьте внутрь span сразу после input, для него и пишите стили. Пример тут: wtfforms.com/
0
Статься класс, реально крутые вещи)
Хорошо бы ссылки на примеры добавить самому попробовать все потыкать, а то гифок как то маловато
Хорошо бы ссылки на примеры добавить самому попробовать все потыкать, а то гифок как то маловато
+2
А есть приложение которое делает gif из анимации в html?
0
Вертикальные отступы в процентах пересчитываются исходя из ширины, а не высоты родительского элемента.
Кто-то знает почему?
На stackoverflow только догадки stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width
0
Как это догадки, там же ответили. Я не ох ты какой переводчик, но вышло, что: высота родителя зависит от высоты детей, отступы детей зависят от высоты родителя. Когда отступы у детей в процентах получается замкнутый круг. И, видимо, получилось «нет времени объяснять», давайте делать :)
Или чтото не так понял?
Или чтото не так понял?
+1
Как я понял, высооты взаимозависимы, и расчет их высоты браузером может вызвать бесконечную рекурсию)
0
Нет там замкнутого круга.
Допустим высота дочернего элемента 100px, а верхнее поле 80%.
Имеем уравнение x=0.8x+100
Получаем x=500.
Высота родителя 500px, дочернего элемента 100px, padding-top 400px.
Допустим высота дочернего элемента 100px, а верхнее поле 80%.
Имеем уравнение x=0.8x+100
Получаем x=500.
Высота родителя 500px, дочернего элемента 100px, padding-top 400px.
0
НЛО прилетело и опубликовало эту надпись здесь
В метро сейчас, не могу проверить.
Но помнится мне, стилизованные чекбоксы не работают в FF.
Но помнится мне, стилизованные чекбоксы не работают в FF.
-1
.block { transform: translatez(0); }
Ещё помогает свойство
-webkit-backface-visibility: hidden;
, хоть у него назначение и другое, также оно пригождается для тех случаев, когда элементы, которые используют трансформации, распологаются на неожиданном месте, например, при поворотах и со смещённым центром в свойстве transform-origin
.+1
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Подборка занимательных CSS рецептов «Голые пятницы #2»