1

次のフィールド検証効果が必要ですが、CSS を考え出すのに苦労しています。

基本的に現時点では、必要に応じてフィールドの最後に赤い情報記号を表示できます (これは、フォームの送信後に発生します)。

ここに画像の説明を入力

私はこれが好きですが、赤い感嘆符の上にカーソルを置いたときに詳細なメッセージが表示されることも望んでいます-理想的には、次のように入力ボックスのすぐ下の中央に表示されます:

ここに画像の説明を入力

どうすればいいですか？私はすでにいくつかの CSS を開始しましたが、それを完成させるには助けが必要です - 以下のリンクを参照してください。

http://cdpn.io/rKLhl

4

1 に答える 1

3

1 つの質問内でさまざまなことを尋ねています。主なポイントは次のとおりです。

デモ: http://jsfiddle.net/LNr6f/1/

1) hidden を作成しdiv、エラーメッセージをトリガーする必要があるときにそれを表示する必要があります (hoverイベントをトリガーとして使用しましたが、ニーズに合わせて調整するだけです)。

2) ;で丸い境界線を作成できます。CSS border-radius

3) CSS を使用してグラデーション背景を作成できます。幸運なことに、優れたエディターとクロスブラウザー コードを提供するCSS グラデーション ジェネレーターが用意されています (例では単純な赤い背景を使用しています)。 ;

4）テキストボックスに関連するツールチップの位置を維持する必要があります。例のように使用relativeおよびabsolute配置します。

5)矢印が必要です。これは画像にすることができますが、例のようにCSS pseudo-class :before(または:after)を使用して純粋な CSS で作成することもできます。 . 次に、絶対配置を使用して、div の外に移動し、x 軸の中央に配置する必要があります。

ここから始めることができます、頑張ってください。

サンプル HTML

<div id="container">
    <input type="text" class="trigger" />
    <div class="tooltip">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nunc gravida commodo mauris non sodales. Nunc consectetur 
        mattis arcu eu pharetra. Curabitur metus felis, tempus eu 
        mattis ut, auctor euismod lacus. Praesent ultrices convallis 
        odio, at vestibulum nulla faucibus nec. Nam euismod suscipit 
        massa, non euismod dui gravida ut. 
    </div>
</div>

サンプルCSS

#container {
    position: relative;
    border: 1px dashed silver;
    width: 100%;
    height: 300px;    
}

#container > .trigger{
    width: 300px;    
}

#container > .tooltip{
    position: absolute;
    display: none;
    background-color: red;     
    width: 200px;    
    left: 50px;
    top: 40px; 
    border-radius: 10px;
    padding: 10px;
    color: white;
}

#container > .tooltip:before {
    position: absolute;
    content: '';
    border-width: 10px;
    border-style: solid;
    border-color: rgba(255,255,255,0) rgba(255,255,255,0) red rgba(255,255,255,0);
    top: -20px; 
    left: 90px;    
}

#container > .trigger:hover + .tooltip {
    display: block;
}
于 2013-01-30T16:29:11.573 に答える