ใช้นิพจน์ CSS เพื่อกำหนดนิพจน์เพื่อกำหนดรูปแบบอินพุต ซึ่งเรียบง่ายและไม่ซับซ้อน ข้อเสียคือ FireFox ไม่รองรับนิพจน์การตัดสิน สิ่งที่ร้ายแรงคือคุณสามารถแยกแยะได้เพียงอันเดียว (เช่นในตัวอย่างนี้ คุณสามารถแยกแยะได้เฉพาะกล่องข้อความเท่านั้น) อย่าพยายามตั้งค่าหลายอัน อันต่อไปนี้จะเขียนทับอันบนสุด... Orz.. .
รหัส:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] <!doctype html สาธารณะ "-//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="Author" content="จัสตินยัง"/>
<meta name="คำหลัก" content=""/>
<meta name="คำอธิบาย" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
ป้อนข้อมูล
-
สีพื้นหลัง:expression(this.type=="text"?'#FFC':'');
-
</สไตล์>
</หัว>
<ร่างกาย>
<ดล>
<dt>นี่คือกล่องข้อความปกติ:<dd><input type="text" name="">
<dt>นี่คือปุ่มปกติ:<dd><input type="button" value="i'm button">
</ดล>
</ร่างกาย>
</html>
อีกวิธีหนึ่ง:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] ป้อนข้อมูล{
ซูม: expression(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(สิ่งนี้));
-
1. นำแอตทริบิวต์ของอินพุตออกและกำหนดให้กับ className
2. สำหรับนิพจน์ คุณลักษณะที่ไม่มีนัยสำคัญ (ซูมที่นี่) จะถูกใช้เพื่อทริกเกอร์ หลังจากประมวลผลสิ่งที่ต้องทำแล้ว คุณลักษณะนี้จะถูกเขียนทับเพื่อแก้ไขปัญหาประสิทธิภาพของการดำเนินการนิพจน์อย่างต่อเนื่อง
รหัส:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] <!--[ถ้า IE 7]>
<style type="text/css" media="screen">
ป้อนข้อมูล{
ซูม: expression(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(สิ่งนี้));
-
อินพุต. ข้อความ {
เส้นขอบ: 1px ทึบ; เส้นขอบสี: #CCC #EEE #EEE #CCC;
พื้นหลัง: #F5F5F5;
-
อินพุตรหัสผ่าน{
เส้นขอบ: 1px ทึบ; เส้นขอบสี: #CCC #EEE #EEE #CCC;
สี: #000; พื้นหลัง: #F5F5F5;
ความกว้าง: 50px;
-
อินพุตปุ่ม{
เส้นขอบ: 1px ทึบ; เส้นขอบสี: #EEE #CCC #CCC #EEE;
สี: #000; ตัวอักษร-น้ำหนัก: ตัวหนา;
-
อินพุตรีเซ็ต{
เส้นขอบ: 1px ทึบ; เส้นขอบสี: #EEE #CCC #CCC #EEE;
สี: #666; พื้นหลัง: #F5F5F5;
-
</สไตล์>
<![สิ้นสุด]-->
<style type="text/css" media="all">
อินพุต[ประเภท="ข้อความ"]{
เส้นขอบ: 1px ทึบ; เส้นขอบสี: #CCC #EEE #EEE #CCC;
พื้นหลัง: #F5F5F5;
-
อินพุต [ประเภท = "รหัสผ่าน"] {
เส้นขอบ: 1px ทึบ; เส้นขอบสี: #CCC #EEE #EEE #CCC;
สี: #000; พื้นหลัง: #F5F5F5;
ความกว้าง: 50px;
-
อินพุต[ประเภท="ปุ่ม"]{
เส้นขอบ: 1px ทึบ; เส้นขอบสี: #EEE #CCC #CCC #EEE;
สี: #000; ตัวอักษร-น้ำหนัก: ตัวหนา;
-
อินพุต [ประเภท = "รีเซ็ต"] {
เส้นขอบ: 1px ทึบ; เส้นขอบสี: #EEE #CCC #CCC #EEE;
สี: #666; พื้นหลัง: #F5F5F5;
-
</สไตล์>
</หัว>
<ร่างกาย>
<ประเภทอินพุต = "ข้อความ" ชื่อ = "xx" />
<input type="password" name="yy" />
<input type="checkbox" name="oo" />
<ประเภทอินพุต = "วิทยุ" ชื่อ = "pp" />
<ประเภทอินพุต = "ปุ่ม" ชื่อ = "qq" value = "ปุ่ม" />
<input type="reset" name="oo" value="reset" />
</ร่างกาย>
</html>
