ホームページ > 記事 > ウェブフロントエンド > CSS スタイルを使用して入力がボタンかテキスト ボックスかを区別する方法_エクスペリエンス交換
CSS スタイルを使用して入力がボタンかテキスト ボックスかを区別する方法_エクスペリエンス交換
- PHP中文网オリジナル
- 2016-05-16 12:04:551816ブラウズ
スタイル設定時に入力がボタンかテキスト ボックスかを区別する方法に関する技術的調査 - 入力の内容を取り出す
HTML タグを見たときに何を思い浮かべますか? ?テキストボックス？ボタン？ラジオボタン？チェックボックス？ …はい、はい、はい、大丈夫です。もしかしたら、この小さな入力で実際に 10 個もの異なるものを作成できるとは思ってもいなかったかもしれません。思いつかなかったものをリストに示します:
テキスト ボックス
パスワードボックス
送信ボタン
リセットボタン
ラジオボタン
チェックボックス
通常のボタン
ファイル選択コントロール
隠しボックス
画像ボタン
つまり、入力は本当に素晴らしいものであり、非常に「実行可能」であると言えるかもしれません「頭」、しかし、実際にプロジェクト内のさまざまなコントロールにさまざまなスタイルを設定しようとすると、入力が非常に「頭を悩ませる」可能性があることがわかります。そもそもなぜ入力にこれほど多くの ID が与えられたのかはわかりませんが、その「N 重の ID」は Web サイトのデザイナーに多大な問題をもたらしました。幸いなことに、働いている人々は素晴らしいです、問題を解決する方法はまだあります〜、それぞれに致命的な欠点がありますが、orz... 解放方法を大まかにまとめると、リストは次のとおりです（私はあまり才能がありません） 、間違いや漏れは避けられないので、アドバイスをお願いします） ガイダンス）：
1. CSS 式を使用して式を決定します
2. CSS でタイプセレクターを使用します
>3. JavaScript スクリプトを使用して実装します
4. Microsoft Visual Studio 2005 以降のバージョンを使用してプロジェクトを開発している場合、スキンも使用できます。
以下では、各方法の詳細な実装とその利点と欠点について説明します。
1: CSS 式を使用して式を判断します
実装コード リファレンス:
doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml" >
頭>
タイトル> diffInput2 タイトル>
メタ 名前="著者" コンテンツ="JustinYoung"/>
メタ 名前="キーワード" コンテンツ=""/>
メタ 名前="説明" コンテンツ="" />
メタ http-equiv ="Content-Type" コンテンツ="text/html; charset=utf-8"/>
スタイル タイプ span>="text/css">
入力
{
背景カラー:expression(this.type=="text"?'#FFC':'');
}
style>
頭>
ボディ>
dl>
dt>これ通常のテキストボックス:dd>入力 種類= "テキスト" 名前="">
dt> span>これは通常のボタンです:dd >入力 タイプ scan>="ボタン" 値="私はボタンです">
dl>
ボディ>
html>
优点：简单、轻量级
要点：表現判断表現形式 FireFox はサポート対象外です。 難点は一つしか区別できず（例の中ではテキスト本文しか区別できない）、不要な図がいくつも設置されていて、下の会が上を覆い隠してしまう Orz …
2：css 中の type选择器
实现参照代：
doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml" >
頭>
タイトル> diffInput2 タイトル>
メタ 名前="著者" コンテンツ="JustinYoung"/>
メタ 名前="キーワード" コンテンツ=""/>
メタ 名前="説明" コンテンツ="" />
メタ http-equiv ="Content-Type" コンテンツ="text/html; charset=utf-8" />
スタイル タイプ="text/css">
input[type="text"]
{
背景色:#FFC;
}
input[type="password"]
{
背景画像:url(BG.gif);
}
input[type="submit"]
{
背景色:青;
色:白;
}
input[type="reset"]
{
背景色:ネイビー;
色:白;
}
input[type="radio"]
{
/*FF では、background-color などの一部のラジオ スタイルがサポートされていません*/
マージン:10 ピクセル;
}
input[type="checkbox"]
{
/*FF では、background-color などの一部のチェックボックス スタイルがサポートされていません*/
マージン:10px;
}
入力[type="button"]
{
背景色:ライトブルー;
}
style>
頭>
本文>
dl >
dt>これは通常のテキストボックスです:dd>入力入力="テキスト" span> 名前="">スパン>
dt> span>これはパスワード テキストボックスです:dd >入力 タイプ span>="パスワード" 名前=" ">
dt>これ送信ボタンです:dd>入力 種類= "送信">
dt>これはリセット ボタンです:dd>入力入力="リセット">
dt>これはラジオです:dd>入力入力="ラジオ" 名前="ground1"> 入力タイプ="ラジオ" 名前="ground1">
dt> span>これはチェックボックスです:dd>入力 タイプ="チェックボックス" 名前="ground2 "> 入力種類="チェックボックス" 名前="ground2">
dt>これは通常のボタンです:dd> input type="button" 値="私はボタンです">
dl>
ボディ>
html> p>
利点: それぞれの入力コントロール形式を分離できることを明確にしました。
欠点: タイプ選択ツール、IE6 以前の Web 標準でサポートされているあまり良くないブラウザはサポートできません (難しい Orz…）
3：用javascript手書き实现
实现参考代：
前台html代：
html xmlns="http://www.w3.org/1999/xhtml" >
頭>
タイトル> diffInput タイトル>
メタ 名前="著者" コンテンツ="ジャスティンヤング">
meta 名前="キーワード"コンテンツ="">
メタ 名前="説明"
メタ http-equiv ="Content-Type" コンテンツ="text/html; charset=utf-8" >
style type="text/css">
入力{動作:url('css.htc');}
style>
頭>
ボディ>
dl>
dt>これ通常のテキストボックス:dd>入力 種類= "テキスト" 名前="">
dt> span>これはパスワード テキストボックスです:dd >入力 タイプ span>="パスワード" 名前=" ">
dt>これ送信ボタンです:dd>入力 種類= "送信">
dt>これはリセット ボタンです:dd>入力入力="リセット">
dt>これはラジオです:dd>入力入力="ラジオ" 名前="ground1"> 入力タイプ="ラジオ" 名前="ground1">
dt> span>これはチェックボックスです:dd>入力 タイプ="チェックボックス" 名前="ground2 "> 入力種類="チェックボックス" 名前="ground2">
dt>これは通常のボタンです:dd> input type="button" 値="私はボタンです">
dl>
ボディ>
html>
Css.htc代码：
スクリプト言語=javascript>
スイッチ(type)
{
ケース 'テキスト' :
style.backgroundColor="赤";
ブレイク;
ケース 'パスワード':
style.backgroundImage="url(BG.gif)";
ブレイク;
ケース '送信':
style.backgroundColor="青";
style.color="白";
ブレイク;
ケース 'reset':
style.backgroundColor ="ネイビー";
style.color="白";
ブレイク;
ケース 'ラジオ':
style.backgroundColor ="ホットピンク";
ブレイク;
ケース 'チェックボックス':
style.backgroundColor ="緑";
ブレイク;
ケース 'ボタン':
style.backgroundColor="ライトブルー";
ブレイク;
デフォルト: ;//その他はデフォルトのスタイルを使用します。
}
スクリプト>
利点: 各入力コントロールの形式を分割できます。複数のテクニックを組み合わせて使用し、「我は高手」の虚心心を十分に満たします。
問題点: テクニック面では、js を使用した後の処理のため、js が機能しない前は各入力も初期状態になり、その後、突然「変更コード」が表示される可能性があります。 FireFox はサポートしていません Orz…
4：Microsoft Visual Studio 2005 で使用されているスキン。
スキンファイル参照番号：
%--スタイル共通のテキストボックス--%>
asp:TextBox runat="サーバー" style= "background-color:#FFC ">asp:TextBox>
asp:Button runat="サーバー" style=”背景-color:red”>asp:Button>
注意里面の样式はスタイルを追加したものであり、cssClass、道理很简单、場合はcssClass、当然のことながら、スキンを単独で使用することはできず、css 形式のテーブルを統合する必要があります。
利点: それぞれのコントロール形式を分離できます (注意: スキンのみが使用できます)サーバー エンド コントロールが使用されているため、入力は単一ではありませんが、これらのサーバー エンド コントロールはフロント台に「オン」された時点で入力コントロールになります。その他の利点（皮膚の利点）。
欠点：すべての対象が皮膚の機能を使用できるわけではありません。
概要: 上記の方法にはそれぞれ長所と短所があるため、どれか 1 つを単独で使用しても問題を適切に解決することはできません。したがって、問題をより適切に解決するには、複数の方法を併用する必要があります。しかし、複数の方法を組み合わせて使用すれば完璧なのでしょうか?いや～！また、複数のソリューションを維持するにはより大きなコストが必要になるという致命的な欠点もあります。
追記: IE6を筆頭に非Web標準ブラウザが世界を席巻する大変な時代ですIE6 の奇妙な解析モードのせいで、どれほど多くの Web ページ初心者が悲劇的に命を落としたことか、どれほど多くのプログラマーが IE6 の奴隷になったことか、無数の Web デザイナーが屈辱に耐え、IE6 の股下で生計を立ててきたことか。暗闇の中ではありますが、横暴に反対する FireFox の勇敢な人々の出現と、Web 標準に対する IE7 のサポートがますます強化されていく夜明けを見て、私たちはうれしく思います。しかし、夜はまだまだ長く続きます。私たちは、Web 標準が世界を支配する時代に一喜一憂しています。良いニュースは、その時までに私たちの Web デザインとプランニングは食事と同じくらい簡単になるということですが、悲しいことに、その時が本当に来ても、私たちの丼はまだそんなに重いのでしょうか?しかし、人類社会の進歩のために、地球を救う技術のために、そして宇宙を発展させる技術文化のために -_-b... 世界を席巻するWeb標準の到来を今も楽しみにしています。
キーワード: さまざまな入力スタイルを自動的に区別する、CSS で および 、JavaScript を使用して、さまざまな入力スタイル、入力、入力タイプ、入力タイプ ファイル、入力タイプ非表示、入力ファイル、input.dll、html 入力、入力タイプ イメージを自動的に区別します。