CSS式判定式は入力スタイルを設定します

著者：Eve Cole 更新時間：2009-06-20 17:34:55

CSS 式を使用して式を決定し、入力スタイルを設定します。これはシンプルで軽量です。デメリットはFireFoxが表現判定表現に対応していないことです。致命的なのは、1つしか区別できないこと（例ではテキストテキストボックスのみ）、複数設定しようとしないでください、次のものが上位のものを上書きします...orz.. 。

コード：

ソースコードの例[www.downcodes.com]

<!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" >
<頭>
<title>www.downcodes.com</title>
<meta name="著者" content="JustinYoung"/>
<meta name="キーワード" content=""/>
<meta name="説明" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
入力
{
背景色:式(this.type=="テキスト"?'#FFC':'');
}
</スタイル>
</head>

<本文>
<dl>
<dt>これは通常のテキストボックスです:<dd><input type="text" name="">
<dt>これは通常のボタンです:<dd><input type="button" value="i'm button">
</dl>
</body>
</html>

別の方法:

ソースコードの例[www.downcodes.com]

入力{
ズーム:expression(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));
}

1. input の属性を取り出して className に代入します。
2. 式の場合、必要のない属性 (ここではズーム) をトリガーとして使用します。この属性は、式の継続実行の効率の問題を解決するために上書きされます。

コード：

ソースコードの例[www.downcodes.com]

<style type="text/css" media="all">
input[type="テキスト"]{
ボーダー: 1px ボーダーカラー: #CCC #EEE #EEE #CCC;
背景: #F5F5F5;
}
input[type="パスワード"]{
ボーダー: 1px ボーダーカラー: #CCC #EEE #EEE #CCC;
カラー: #000; 背景: #F5F5F5;
幅: 50ピクセル;
}
input[type="ボタン"]{
ボーダー: 1px ソリッド; ボーダーカラー: #EEE #CCC #CCC #EEE;
色: #000; フォントの太さ: 太字;
}
入力[タイプ="リセット"]{
ボーダー: 1px ソリッド; ボーダーカラー: #EEE #CCC #CCC #EEE;
色: #666; 背景: #F5F5F5;
}
</スタイル>
</head>
<本文>
<input type="text" name="xx" />
<input type="password" name="yy" />
<input type="checkbox" name="oo" />
<input type="ラジオ" name="pp" />
<input type="button" name="qq" value="button" />
<input type="reset" name="oo" value="reset" />
</body>
</html>