矢印がフォームの各行を指している

Question

私のウェブサイトのサインアップフォームでは、フォームのツールチップを作成したいと思っていますが、css3から作成された矢印が必要です。私はこの種のことをやり遂げる方法を知っているわけではありません。

入力：フォーカスの場合、三角形（CSS3でレンダリングされた）は、遷移でその入力テキストフィールドを指すように上または下に移動します。これは実現可能ですか？どうやって？ありがとうございました。

jQueryやJavaScriptではなく、CSSから完全に作りたいと思います。帯域幅を使わないようにできるだけJavaScriptを使わないようにしています。

:focusを組み込むセレクタのみ :focus擬似セレクターを超えた子孫要素を選択することができますので、あなたはJavaScriptをせずに、厳密にそれを行うことができない、と input要素が 空要素です。

Answer 1

あなたは国境を経由して比較的容易に三角形を行うことができます。 This demoはおそらく私のお気に入りですが、CSSでチャット/ツールチップのバブルを作成することになります。あなたはしかし、それよりも多くの創造的な取得することができます

： - それは単なるテキストだし、適切に縮小さと実際にそれをgzipで圧縮されたhttp://jsfiddle.net/czuxH/

を私には、JavaScriptの最小限のスニペットを切り出すことにより、帯域幅を節約についてはあまり心配しないだろうあまり帯域幅ではありません。アニメーションをトリガして矢印を配置するには、ここでJSが必要になります（ただし、CSS3アニメーションを使用してトランジションを行うことができます）。

Answer 2

また、input要素がに置き換えられたため、擬似要素を使用することはできません。要素。

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/, ''); 
});