2011-07-15 4 views
2

ボタンやスクロールバーなどの標準コントロールを見た目に変えることはできますか?例えば、私は普通のボタンと押したボタンの状態のために私自身の画像を持っています、どのようにボタンを使用させるのですか?HTML 5カスタムコントロール

通常のスタイルと押されたスタイルの両方に背景を設定しても、ボタンはまだ初期のフォームを持ち、画像フォームと一致しません。

次に、スクロールバーはどうですか?それらは複雑で、各状態ごとに複数のイメージが含まれています。

よろしく、

答えて

3

。 CSSの:active:hover疑似クラスを使用し、ボタンとフォーム要素の背景を画像で置き換えます。 this excellent tutorialでは、これらの手法でHTML5とCSS3を使用してカスタム検索フォームを作成する方法について説明します。

スクロールバーのスタイルを変更しないでください(特に、ビューポートのスクロールバーについては、ブラウザのブラウザの一部であり、ユーザーは特定の方法で表示することを期待しています)。スクロールバーを非表示にして(overflow: hiddenを設定)、次にbuttoninput type="range"(またはブラウザのサポートが重要な場合はHTML5以外の要素)をDOMに挿入してスタイリングするだけで、JavaScriptを徐々に強化する(おそらくjQueryを使用する)あなたの望むやり方とスクロールするためのclickイベントをスクロールしてスクロールする必要があります。many jQuery plugins that do this for you

+0

これは正常ですか? nはまだ ":アクティブ"です。マウスの左ボタンを押した後、マウスの左ボタンを押したままボタン領域を離しますか?同じ状況下では、通常のWindowsのボタンは押されなくなります。 – noober

+1

@noober:それはブラウザが決定するまでです。 [The specs](http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes)は、単純に "*:'アクティブ '疑似クラスを適用します。ユーザー。*"。 – You

+0

しかし、同じブラウザでは、カスタマイズされていないボタンは通常のWindowsボタンのように動作します。 – noober

2

は、多くの場合、あなたはこれらのコントロールの上にdivを層やスクラッチからコントロールを作成する必要があります。 JQuery UIが特定のコントロールをどのように表示するかは、どのようにして行うことができるかを理解するのに適しています。簡単な方法は、JQuery UIを使用し、themerollerまたはカスタマイズされたCSSを使用してコントロールをスタイルすることです。これらのタスクのいくつかを自分で実行することは容易ではありません。フォームコントロールの

http://jqueryui.com/