CSS 표현식 판단 표현식이 입력 스타일을 설정합니다.

저자：Eve Cole 업데이트 시간：2009-06-20 17:34:55

CSS 표현식을 사용하여 간단하고 가벼운 입력 스타일을 설정하는 표현식을 결정하세요. 단점은 FireFox가 표현 판단 표현을 지원하지 않는다는 점입니다. 치명적인 점은 하나만 구별할 수 있다는 것입니다(예: 예에서는 텍스트 텍스트 상자만 구별할 수 있습니다). 여러 개를 설정하려고 하지 마세요. 다음 항목이 맨 위 항목을 덮어쓰게 됩니다... 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="저스틴영"/>
<meta name="키워드" content=""/>
<메타 이름="설명" 내용=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<스타일 유형="텍스트/css">
입력
{
배경색:표현식(this.type=="text"?'#FFC':'');
}
</style>
</head>

<본문>
<DL>
<dt>이것은 일반 텍스트 상자입니다:<dd><input type="text" name="">
<dt>이것은 일반 버튼입니다:<dd><input type="button" value="나는 버튼입니다">
</dl>
</body>
</html>

또 다른 방법:

예제 소스 코드 [www.downcodes.com]

입력{
Zoom: 표현식(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));
}

1. 입력 속성을 꺼내서 className에 할당합니다.
2. 표현의 경우 중요하지 않은 속성(여기서는 확대/축소)을 사용하여 수행해야 할 작업을 처리한 후 이 속성을 덮어써 표현의 연속 실행의 효율성 문제를 해결합니다.

암호:

예제 소스 코드 [www.downcodes.com]

<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; 글꼴 두께: 굵게: #F5F5F5;
}
입력[유형="재설정"]{
테두리: 1px 단색; 테두리 색상: #EEE #CCC #CCC #EEE;
색상: #666; 배경: #F5F5F5;
}
</style>
</head>
<본문>
<입력 유형="텍스트" 이름="xx" />
<입력 유형="비밀번호" 이름="yy" />
<input type="checkbox" name="oo" />
<입력 유형="라디오" 이름="pp" />
<input type="button" name="qq" value="button" />
<input type="reset" name="oo" value="reset" />
</body>
</html>