关于css控制input样式的问题，其实特简单，进来拿分吧~~~
[code=HTML]
<!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>
[/code]
问题：
1 点checkbox时候, input 只需要变背景色的,为什么高度和长度会变？
2 “font-size” 对于input 和 span 是不是不同的标准？ 为什么设置同样的size，一个字体大一个字体小？
[解决办法]
样式没写好。
- HTML code
<!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>
[解决办法]
一般设置的时候需要注意一下，特别是高度和行高保持一致，另外还需要注意就是设置内边距
[解决办法]
[解决办法]
可不可以直接在你要加样式的input里加个class=""呢，有必要用遍历去折腾吗