フォーム要素 (選択、チェックボックス、ラジオなど) をスタイリングしますか?

StackOverflow https://stackoverflow.com/questions/862585

  •  21-08-2019
  •  | 
  •  

質問

CSS を使用してフォーム要素のスタイルを設定すると、ブラウザごとにタグのレンダリング方法が異なるため (safari チェックボックスをレンダリングする場合と同様)、問題が発生する可能性があります。

さて、しばらくサファリを無視しましょう。入力とボタンをスキニングするのはかなり簡単ですが、選択、チェックボックス、ラジオなどを完全にスキンする方法。

次のページを参照してください。
チェックボックススキニング
スキニングの選択
ラジオスキニング

EXTJS や MooTools などの JS フレームワークでそれができると聞いたのですが、大規模なフレームワーク ソリューションは望んでいません。独立した JS だけでスキンを好きなように変更できます。JQuery ソリューションはやめてください。使わないでください。

特定のフレームワークを使用せずにそれを行うアイデアはありますか?

役に立ちましたか？

解決

現在、フォーム要素のスタイルを広範囲にカスタマイズできる JavaScript ソリューションが非常に多くあります。グーグルで簡単にいくつかの良いものを見つけました。

現在、さまざまな種類のフォーム要素のスタイルを見つけることができます。 コードペン.com

古い回答（から 2009 年 5 月 16 日):

はい、とても簡単です。

独立したスクリプトであるniceformsを使用できます
作り用 見栄えの良いフォームは、変更することができます
グラフィック画像 / CSSをあなたの希望として。

アイデアは、同じように見えるものをコーディングすることです
同じで 機能性が違うがデザインが違う
あなたはそれを与える必要があります LIFE」をJavaScriptの魔法の:)で

その場合、あちこちにイルステナーを配置する必要があります。
小切手 ユーザーがクリックしたものを、反映させる必要があります
同じ値 事前に隠されたフォーム要素に、
「偽物」に対応します 1。操作するという意味です。
その後、フォームを送信すると、 正しい値はJS経由の場所です。

他のヒント

完全な制御が必要な場合は、通常、ブラウザーのコントロールを完全に置き換え、他の要素、スタイルシート、スクリプトで偽装する必要があります。

フレームワークを使用したくない場合は、基本的に DIY になります。

とはいえ、コンセプト全体にはいくつかの問題があります。

  1. ユーザーが期待するようにコントロールを動作させること（クリック、ダブルクリック、トリプルクリック、右クリック、ドラッグ、矢印キー、コントロールキーなどからの入力）を取得しようとすると、 難しい.
  2. コントロールはユーザーが期待するとおりに表示されない可能性があります。

個人的には、通常、フォーム コントロールをシステムのデフォルトに固執させ、そこから逸脱しようとしないようにします。ユーザーが期待するものを提供します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top