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

2012-04-27

关于css控制input样式的问题，其实特简单，进来拿分吧~~~[codeHTML]!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1

关于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> 
 
[解决办法]
一般设置的时候需要注意一下，特别是高度和行高保持一致，另外还需要注意就是设置内边距
[解决办法]
探讨

是这个~~~

<!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="tex……

[解决办法]
可不可以直接在你要加样式的input里加个class=""呢，有必要用遍历去折腾吗

热点排行

CSS

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