PavelTkachev

Есть список пронумерованный. Когда нажимаешь на какой-то из пунктов, то число с точкой заменяется на галочку, при этом у остальных элементов порядковые номера не меняются. И наоборот, если была галочка, то на число с точкой, которое соответствует порядковому номеру элемента в списке. Всё это должно адаптироваться под разные разрешения экрана - это я решаю изменением размера шрифта при моноширинном шрифте. Галочка должна увеличиваться вместе с размером шрифта.

Просто мне нужна адаптивность. И я думал шрифт использовать. SVG если туда вставить, то он будет автоматически увеличиваться?

Только через list-style-image можно сделать?

Это переворот в моём понимании :after. Я ранее считал, что он вставляет контент после блока, а не внутри справа. Я исходил их названия, что after - это после, но никак не innerright. Я хотел букву «д» пририсовывать справа от инпута через css. Если присмотреться, то у последнего инпута есть border-bottom. И мне надо, чтобы его длинна была равна элементам сверху с учётом отступа.

Потому что я так хочу. А как сделать, чтобы отображался? 20ch+0.5ch+7ch+0.5ch+6ch=34ch. Поэтому я ожидал, что нижняя черта будет равно трём верхним+отступы между ними. А она короче.

Сделал вёрстку с четырьмя инпутами внутри списка с моноширинным шрифтом. http://jsfiddle.net/bmv123yd/ Почему длинна четвёртого инпута меньше, чем сумма первых трёх включая отступ? Я использовал для всего единицы ch и моноширинный шрифт. Почему не отображается символ, написанные через :after?

Вот что у меня получается http://jsfiddle.net/cujcsrws/ Как сделать, чтобы список был по центру? margin:0 auto; не помогает. Как сделать, чтобы подчёркивание и цвет фона не заходили на индекс?

А я думал сделать через li { list-style-type: none; } li:before { content: ""; }+ fontello Клики можно сделать через css?

Есть нумерованный список. Нужно, чтобы по клику цифра превращалась в галочку, и наоборот. Скажите, это возможно реализовать без JavaScript, только на CSS3?

Спасибо за помощь. Кстати, проблема с крестиком решается вот так input::-ms-clear { display: none;}

Анимаций никаких не будет. А как сделать расчёты я пока не представляю. Надеялся, что CSS мне поможет. Как узать ширину символа в JS? Или это на сайте про JS спрашивать надо? А ch - его все браузеры понимают? Я сделал отдельный стиль для IE и в нём ширину посчитал через em. Для остальных браузеров сделал через ch.

А что это за единица измерения такая? Один чих? Когда задал ширину 30ch, то в FF всё исправилось. А в IE работать перестало... Так в любом случае полетит либо отображение либо функционал. У меня задача как можно меньше использовать JS, чтобы на старых смартфонах не тормозило. А как вынести крестик стирания текста из инпут за пределы инпут? Или хотя бы как его отключить?

А вычислять ширину поля исходя из размера шрифта тоже через js? Или calc() подойдёт?

Я хочу, чтобы ширина инпута равнялась 30 ширинам букв во всех браузерах. Взят специально моноширинный шрифт. Также чтобы не появлялся крестик на удаление всего текста в поле, так как он съедает 2 буквы. Такой крестик нужен, но в правом свободном отступе. При портретной ориентации, чтобы использовалось 100% доступной ширины с учётом всех заданных отступов. А при альбомной ориентации, чтобы ширина была как в портретной. Функционал формы не нужен. Я взял инпуты для удобства сериализации. Можно и без инпутов сделать. Если это поможет вёрстке.

http://jsfiddle.net/rr9cnhwy/3/ Вот что я сварганил. Ширина элемента списка вычисляется из размера шрифта. Нужно теперь сделать это адаптивным под разные устройства размеры монитора. Почему-то в FireFox при нечётном значении размера шрифта 30 символов оказываются длиннее инпута. Тогда как в IE всегда длинна совпадает.

В общем у меня есть список <li></li>. Мне надо, чтобы в портретном режиме он был по всей ширине экрана, а в альбомном был такой же, как в портретном. И при этом размер шрифта вычислялся исходя из этой самой ширины. Вот я и примеряюсь как этого добиться... И при этом это ещё должно работать... Похоже только всё на JS?

На таких-то устройствах было обнаружено, что хотя монитор перевернул, но стили не поменялись.

Это я всё читал. И CanIUse.com смотрел. Может у кого-то есть реальный опыт использования?

Насколько хорошо поддерживается браузерами свойство @media screen and (orientation: portrait)В интернете много примеров с шириной или высотой, поэтому я усомнился в широкой поддержке ориентации. Я зря волнуюсь?

http://codepen.io/GreatRash/pen/JoKvmo Спасибо!

Я заберу текст внутри div с помощью javascript по нажатию на button и передам его через ajax. Зачем второй элемент?

Почему? И какой лучший? И какой будет самый кросбраузерный и всеверсионный?

Скажите, а использование <div contenteditable="true"> - это и есть вариант 1?

Возможно ли сделать поле для ввода не фиксированной высоты, а переменной: так, чтобы вначале была только одна строчка, но как только текст начал писаться с новой строки, то поле для ввода само увеличивало высоту на величину строки, а при удалении символов свою длину уменьшало?