<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>csstest</title><style>/*[GOMS12040009]Amend by Lily on 09Apr2012*/input.text{ font-size: 12px; border-width: 1px; border-color: #AAAAAA; border-style: solid; height: 21px;}input.readonly{ border-width: 1px; border-color: #AAAAAA; border-style: solid; height: 21px; background-color: #EEEFED;}span.readonly{ font-size: 12px; border:1px; border-color: #AAAAAA; border-style: solid; height: 21px; background-color: #EEEFED;}</style><script language="JavaScript"> function protectElement(element){ var element = document.getElementById(element); if (element.type == "text") { element.className ="readonly"; }} function unProtectElement(element){ var element = document.getElementById(element); if (element.type == "text") { element.className =""; }} function checkboxOnclick(){ if(document.getElementById("cc").checked == true) { unProtectElement("aa"); } else { protectElement("aa"); }} </script></head><body> <form> <input type="text" class="readonly" style="width:70px;" value="20000" id="aa"/> <input type="checkbox" name="cc" id="cc" onClick="checkboxOnclick();"/> <span class="readonly" style="width:172px">20000</span> </form></body></html>
样式没写好。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <meta http-equiv="Content-Type " content="text/html; charset=utf-8"/> <title> csstest </title> <style> *{ margin:0; padding:0;} body{font:12px/2 arial;} .default_input{ height:19px; line-height:19px;} .text{border-width:1px;border-color:#AAAAAA;border-style:solid;height:21px;} input.readonly{border-width:1px;border-color:#AAAAAA;border-style:solid;height:21px;background-color:#EEEFED;} span.readonly{border:1px;border-color:#AAAAAA;border-style:solid;height:21px;background-color:#EEEFED;} </style> <script> function protectElement(element) { var element = document.getElementById(element); if (element.type == "text") { element.className = "readonly "; } } function unProtectElement(element) { var element = document.getElementById(element); if (element.type == "text") { element.className = "default_input"; } } function checkboxOnclick(){ if (document.getElementById("cc").checked == true) { unProtectElement("aa"); } else { protectElement("aa"); } } </script></head><body><form> <input type="text" class="readonly" style="width:70px;" value="20000" id="aa"/> <input type="checkbox" name="cc" id="cc" onclick="checkboxOnclick()"/> <span class="readonly" style="width:172px"> 20000 </span></form></body></html>
一般设置的时候需要注意一下,特别是高度和行高保持一致,另外还需要注意就是设置内边距
高度和宽度还是会动啊
我改好了
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
是这个~~~
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
是这个~~~
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
font:12px/2 , 这个什么意思呢? input 和 span 显示出来的字体也不同
我写了一个如下的样式
input[type=text]
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 1px 2px 0px 2px;
border-width: 1px;
border-color: red;
border-style: solid;
}
目的是给所有 input.text 加上这样默认的样式,但是很奇怪的是我用一个简单的HTML测试就会起作用,但是放在我的系统(IE7)里面就不起作用了,哪位大牛遇过这样的问题啊?
可不可以直接在你要加样式的input里加个class=""呢,有必要用遍历去折腾吗