Стрелка, указывающая на каждую строку формы

Question

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

По сути, когда input: focus, треугольник (отображаемый с помощью CSS3) будет перемещаться вверх или вниз при переходе, указываявведите текстовое поле.Это возможно?Как?Спасибо.

Я бы хотел сделать это полностью из CSS, а не из jQuery или JavaScript.Я стараюсь максимально избегать использования JavaScript, чтобы не использовать пропускную способность.

Answer 1

Вы можете делать треугольники с относительной легкостью через границы. Эта демонстрация , вероятно, является моей любимой по этому вопросу, и она проходит через создание пузыря чата / всплывающей подсказки в CSS.

Вы можете стать намного более креативным, чем это, хотя: http://jsfiddle.net/czuxH/

Я бы не стал сильно беспокоиться об экономии пропускной способности за счет сокращения минимального количества фрагментов JavaScript - это просто текст, должным образом уменьшенный и сжатый, но на самом деле это не слишком большая пропускная способность. Здесь вам понадобится JS для запуска анимации и позиционирования стрелки (хотя вы можете использовать анимацию CSS3 для перехода).

Answer 2

Вы не можете сделать это строго без JavaScript, потому что селектор, включающий :focus, может выбирать только дочерние элементы, кроме псевдоселектора :focus, а input являются пустыми элементами.Вы также не можете использовать псевдоэлементы, потому что input элементы заменены элементами.

Вы можете сделать это с помощью touch JavaScript, чтобы добавить элементы насобытие.

var input = document.getElementsByName('some_input')[0],
    parent = input.parentNode,
    bubble = document.createElement('div');

bubble.className = 'bubble';
bubble.textContent = 'Your text.';
parent.appendChild(bubble);

input.addEventListener('focus', function() {
    parent.className += ' focus';
});

input.addEventListener('blur', function() {
    parent.className = parent.className.replace(/\bfocus\b/, '');
});