ホームページ >ウェブフロントエンド >CSSチュートリアル >入力ボックスとボタンの見分け方
入力ボックスとボタンの見分け方
- 巴扎黑オリジナル
- 2017-08-14 14:57:352044ブラウズ
スタイル設定時に入力がボタンかテキストボックスかを区別する方法の技術調査 - 入力の内容を取り出す
HTMLタグのを見たとき、何を思い浮かべますか?テキストボックス？ボタン？ラジオボタン？チェックボックス？ …はい、はい、はい、大丈夫です。もしかしたら、この小さな入力で実際に 10 個の異なるものを作成できるとは思っていなかったかもしれません。考えたことのないものをリストに示します。
テキスト ボックス
< ;input type ="パスワード" /> パスワードボックス
送信ボタン
button
チェックボックス
通常のボタン
hidden" /> 隠しボックス
画像ボタン
つまり、入力は本当に素晴らしいことであり、とても「挑発的」であると言うかもしれませんが、実際に異なる設定をしようとすると、プロジェクト内のさまざまなコントロールのスタイルを試してみると、入力によって本当に「頭が大きくなる」ことがわかるでしょう。そもそもなぜ入力にこれほど多くの 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 タイトル>
<メタ 名前="作成者"content=" justinyoung " <メタ name
="説明" content=""/> <メタ http-equiv
="コンテンツ- 「 content="text/html; charset=utf-8"/> <style type
="text/css">」と入力します。 input { background-color:expression(this.type=="text"?'#FFC':'')
; }
スタイル
>
頭>
<ボディ
> < dl
><dt>これは通常のテキストボックスです:<dd><inputtype="text"名前= ">
<dt>これは通常のボタンです:<dd>><入力 タイプ=ボタン" value="私はボタンです">
dl>
body >
html>
デメリット:式判定式 Firefoxではサポートされていません。致命的なのは、1 つしか区別できないことです (たとえば、例ではテキスト テキスト ボックスのみが区別できます)。複数を設定しようとしないでください。次のものが上のものを上書きします Orz...
以上が入力ボックスとボタンの見分け方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。