Gunakan ekspresi CSS untuk menentukan ekspresi untuk mengatur gaya input, yang sederhana dan ringan. Kerugiannya adalah FireFox tidak mendukung ekspresi penilaian. Fatalnya hanya bisa membedakan satu saja (misalnya pada contoh hanya bisa membedakan kotak teks teks saja), jangan coba-coba atur kelipatan, yang berikut akan menimpa yang paling atas.. Orz.. .
Kode:
Contoh Kode Sumber
[www.downcodes.com] <!doctype html publik "-//W3C//DTD XHTML 1.0 Transisi//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<kepala>
<title>www.downcodes.com</title>
<meta name="Penulis" content="JustinYoung"/>
<meta name="Kata Kunci" content=""/>
<meta nama="Deskripsi" konten=""/>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8"/>
<gaya tipe="teks/css">
masukan
{
warna latar belakang:ekspresi(ini.type=="teks"?'#FFC':'');
}
</gaya>
</kepala>
<tubuh>
<dl>
<dt>Ini kotak teks normal:<dd><input type="text" name="">
<dt>Ini adalah tombol normal:<dd><input type="button" value="i'm button">
</dl>
</tubuh>
</html>
Cara lain:
Contoh Kode Sumber
[www.downcodes.com] masukan{
zoom: ekspresi(fungsi(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(ini));
}
1. Keluarkan atribut input dan tetapkan ke className.
2. Untuk ekspresi, atribut yang tidak signifikan (di sini zoom) digunakan untuk memicunya. Setelah memproses apa yang perlu dilakukan, atribut ini ditimpa untuk menyelesaikan masalah efisiensi eksekusi ekspresi secara berkelanjutan.
Kode:
Contoh Kode Sumber
[www.downcodes.com] <!--[jika lt IE 7]>
<style type="teks/css" media="layar">
masukan{
zoom: ekspresi(fungsi(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(ini));
}
masukan.teks{
batas: 1px solid; warna batas: #CCC #EEE #EEE #CCC;
latar belakang: #F5F5F5;
}
masukan.kata sandi{
batas: 1px solid; warna batas: #CCC #EEE #EEE #CCC;
warna: #000; latar belakang: #F5F5F5;
lebar: 50 piksel;
}
masukan.tombol{
batas: 1px solid; warna batas: #EEE #CCC #CCC #EEE;
warna: #000; berat font: tebal; latar belakang: #F5F5F5;
}
masukan.reset{
batas: 1px solid; warna batas: #EEE #CCC #CCC #EEE;
warna: #666; latar belakang: #F5F5F5;
}
</gaya>
<![endif]-->
<style type="teks/css" media="semua">
masukan[ketik="teks"]{
batas: 1px solid; warna batas: #CCC #EEE #EEE #CCC;
latar belakang: #F5F5F5;
}
masukan[ketik="kata sandi"]{
batas: 1px solid; warna batas: #CCC #EEE #EEE #CCC;
warna: #000; latar belakang: #F5F5F5;
lebar: 50 piksel;
}
masukan[ketik="tombol"]{
batas: 1px solid; warna batas: #EEE #CCC #CCC #EEE;
warna: #000; berat font: tebal; latar belakang: #F5F5F5;
}
masukan[type="setel ulang"]{
batas: 1px solid; warna batas: #EEE #CCC #CCC #EEE;
warna: #666; latar belakang: #F5F5F5;
}
</gaya>
</kepala>
<tubuh>
<masukan tipe="teks" nama="xx" />
<masukan tipe="kata sandi" nama="yy" />
<masukan tipe="kotak centang" nama="oo" />
<masukan tipe="radio" nama="pp" />
<masukan tipe="tombol" nama="qq" nilai="tombol" />
<input type="reset" nama="oo" value="reset" />
</tubuh>
</html>