关于css控制input样式的有关问题，其实特简单，进来拿分吧~ _HTML/CSS

关于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>